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 的写法：

:::previewdemo-preview=./xxx/xx.vue::::::preview titledemo-preview=./xxx/xx.vue::::::preview title || component description contentdemo-preview=./xxx/xx.vue:::