vitepress-demo-plugin
一个支持在VitePress中展示并渲染Vue/React/HTML等多种语法demo的插件，支持一键跳转到StackBlitz和CodeSandbox在线编辑，适合构建组件库站点。
• Copy the embed code to showcase this product on your website
• Share on X to spread the word about this amazing tool
首个支持 vue/react/html 等多种语法 demo 展示的 vitepress 插件，并支持一键跳转至 stackblitz 及 codesandbox 等三方平台去在线编辑。十分适合构建组件库站点的场景。官方文档：https://vitepress-demo.fe-dev.cn/源码仓库：https://github.com/zh-lx/vitepress-demo-plugin## 🚀 安装shellnpm i vitepress-demo-plugin -D# oryarn add vitepress-demo-plugin -D# orpnpm add vitepress-demo-plugin -D## 🌈 使用1. 引入插件 ts 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 了： html <!-- 展示 vue demo --> <demo vue="../demos/demo.vue" /> <!-- 展示 react demo --> <demo react="../demos/demo.tsx" /> <!-- 展示 html demo --> <demo html="../demos/demo.html" /> 效果预览，在线查看