vitepress | 文档：展示与说明只写一次，使用vitepress-deme-preview插件

展示和说明：一个显示“展示”部分，一个显示“代码”部分 —— 只写一次，采用 vitepress-demo-preview 插件（vitepress-demo-preview 的文档）

安装 npm install @vitepress-demo-preview/component @vitepress-demo-preview/plugin --save-dev

配置

主题配置导入，在  .vitepress/theme/index.ts 文件中

import DefaultTheme from 'vitepress/theme'
import { AntDesignContainer, ElementPlusContainer, NaiveUIContainer } from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.component('demo-preview', AntDesignContainer)
  }
}

 添加 markdown 插件，在 config.ts 中配置

import { defineConfig } from 'vitepress'
import { containerPreview, componentPreview } from '@vitepress-demo-preview/plugin'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(containerPreview)
      md.use(componentPreview)
    }
  }
})

 两种展示的方法：

① 组件 component 的写法

<!-- Tip: Support for closed tags -->

<preview path="./xxx/xx.vue"></preview>

<preview path="./xxx/xx.vue" title="title"></preview>

<preview path="./xxx/xx.vue" title="title" description="component description content"></preview>

注： 写在一行，不要换行，会不生效！ 

例子：

 ② 容器 container 的写法：

:::preview

demo-preview=./xxx/xx.vue

:::

:::preview title

demo-preview=./xxx/xx.vue

:::

:::preview title || component description content

demo-preview=./xxx/xx.vue

:::