🏄♂️ 插件包
Package | Version |
---|---|
@vitepress-code-preview/container | |
@vitepress-code-preview/plugin |
⚙ 安装
sh
pnpm add @vitepress-code-preview/container @vitepress-code-preview/plugin
🚀 引入
- ① 编辑
docs/vite.config.ts
,注册 Vite 插件,如果需要支持 JSX 组件,请安装@vitejs/plugin-vue-jsx
ts
import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { viteDemoPreviewPlugin } from '@vitepress-code-preview/plugin'
export default defineConfig({
// ...
plugins: [viteDemoPreviewPlugin(), vueJsx()],
})
- ② 编辑
docs/.vitepress/config.ts
,注册 markdown 插件
ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vitepress'
import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'
export default defineConfig({
// ...
markdown: {
config(md) {
const docRoot = fileURLToPath(new URL('../', import.meta.url))
md.use(demoPreviewPlugin, { docRoot })
},
},
})
- ③ 编辑
docs/.vitepress/theme/index.ts
,注册组件容器
ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import DemoPreview, { useComponents } from '@vitepress-code-preview/container'
import '@vitepress-code-preview/container/dist/style.css'
export default {
extends: DefaultTheme,
enhanceApp(ctx) {
useComponents(ctx.app, DemoPreview)
},
} satisfies Theme