Vitepress使用插件 vitepress-demo-plugin 实现代码示例文档

看看基础效果示例

loading

试试怎么用

安装

npm install vitepress-demo-plugin -D

yarn add vitepress-demo-plugin -D

pnpm add vitepress-demo-plugin -D

引用插件

在 .vitepress/config.ts 中添加如下代码以引入 vitepress-demo-plugin 插件：

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

export default defineConfig({
  // other configs...
  markdown: { 
    config(md) { 
      md.use(vitepressDemoPlugin, {
        demoDir: path.resolve(__dirname, '../demos'),// demoDir 属性配置需要展示的 vue 文件 的目录
      }); 
    }, 
  }, 
});

展示 vue 组件 demo

在 .md 文档中的内容通过 <demo vue="xxx/path" /> 指定一个 .vue 文件的路径，渲染该 vue 组件并展示其代码：

<demo vue="../demos/demo.vue" />

如何插件配置了 demoDir 则 xxx 路径可以省略：

<demo vue="demo.vue" />