vitepress-demo-plugin
一个支持在VitePress中展示并渲染Vue/React/HTML等多种语法demo的插件,支持一键跳转到StackBlitz和CodeSandbox在线编辑,适合构建组件库站点。
首个支持 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" />
效果预览,在线查看