【工具自荐】一个支持在 vitepress 中展示并渲染 demo 的插件，并支持 vue/react/html 等多种语法的 demo

[zh-lx]

首个支持 vue/react/html 等多种语法 demo 展示的 vitepress 插件，并支持一键跳转至 stackblitz 及 codesandbox 等三方平台去在线编辑。十分适合构建组件库站点的场景。

官方文档：https://vitepress-demo.fe-dev.cn/
源码仓库：https://github.com/zh-lx/vitepress-demo-plugin

🚀 安装

npm i vitepress-demo-plugin -D
# or
yarn add vitepress-demo-plugin -D
# or
pnpm add vitepress-demo-plugin -D

🌈 使用

1. 引入插件

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

export default defineConfig({
  // other configs...
  markdown: { 
    config(md) { 
      md.use(vitepressDemoPlugin); 
    }, 
  }, 
});

2. 展示 Demo

现在你可以在 markdown 中通过 <demo /> 组件展示你的 demo 了：

<!-- 展示 vue demo -->
<demo vue="../demos/demo.vue" />

<!-- 展示 react demo -->
<demo react="../demos/demo.tsx" />

<!-- 展示 html demo -->
<demo html="../demos/demo.html" />

效果预览，在线查看