---

📖 介绍

vitepress-demo-plugin 是一个支持在 Vitepress 构建的站点中展示并预览代码 Demo 的插件，支持 vue/react/html 等多种语法组件的预览。

在线查看效果

• 展示 React 组件：

  

• 展示 Vue 组件：

  

🚀 安装

1npm i vitepress-demo-plugin -D
2# or
3yarn add vitepress-demo-plugin -D
4# or
5pnpm add vitepress-demo-plugin -D

🌈 使用

1. 引入插件

1import { defineConfig } from 'vitepress';
2import { vitepressDemoPlugin } from 'vitepress-demo-plugin'; 
3import path from 'path';
4
5export default defineConfig({
6  // other configs...
7  markdown: { 
8    config(md) { 
9      md.use(vitepressDemoPlugin); 
10    }, 
11  }, 
12});

2. 展示 Demo

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

1<!-- 展示 vue demo -->
2<demo vue="../demos/demo.vue" />
3
4<!-- 展示 react demo -->
5<demo react="../demos/demo.tsx" />
6
7<!-- 展示 html demo -->
8<demo html="../demos/demo.html" />

📧 交流与反馈

任何使用问题可以加入微信群或者添加作者微信 zhoulx1688888 进行咨询与反馈: