使用Vitepress内置的代码染色

现在插件使用了Vitepress内置的shiki进行代码染色，即组件demo的代码渲染效果会和文档的代码渲染保持一致，不需要进行额外的配置。 这也意味着可以直接在代码中使用Vitepress已经默认启用的转换器，不需要额外配置shiki的transformers 例如：

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0) 

function increment() {
  count.value++
  count.value++
}

function decrement() { 
  count.value--
} 
</script>

<template>
  <div class="container">
    <div class="title">
      This is a Vue counter
    </div>
    <div class="btn-container">
      <button class="btn" @click="increment">
        +1
      </button>
      <button class="btn" @click="decrement">
        -1
      </button>
    </div>
    <div>Current count: {{ count }}</div>
  </div>
</template>

<style scoped>
.container {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
    'sans-serif';
  font-size: 14px;
  line-height: 20px;
}
.title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.btn-container {
  display: flex;
  align-items: center;
  column-gap: 24px;
}
.btn {
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 4px;
  line-height: 20px;
  padding: 4px 16px;
  margin: 12px 0;
}
</style>

loading

同样的，如果需要扩展shiki（如twoslash）则需要在vitepress的配置项中进行配置。可以参考shiki的官方文档

代码块 Meta（例：twoslash）

如果你已经在 VitePress 配置了 @shikijs/vitepress-twoslash，可以通过 codeMeta / vueMeta / reactMeta / htmlMeta 把对应的 meta 追加到代码块语言后，以便 twoslash 后缀正确传入。

全局配置

import { defineConfig } from 'vitepress';
import { vitepressDemoPlugin } from 'vitepress-better-demo-plugin';

export default defineConfig({
  markdown: {
    config(md) {
      md.use(vitepressDemoPlugin, {
        codeMeta: 'twoslash',
        // vueMeta/reactMeta/htmlMeta 会覆盖 codeMeta
      });
    },
  },
});

局部覆盖

<demo vue="demo.vue" vue-meta="twoslash" />
<demo react="demo.tsx" code-meta="twoslash" />

loading