Skip to content

VitePress 默认的代码演示功能用起来有点繁琐,所以我自己开发了一个插件来更简单的使用这个功能,并且已经发布到 npm

项目地址

🏄‍♂️ 插件包

PackageVersion
@vitepress-code-preview/containercontainer version
@vitepress-code-preview/pluginplugin version

⚙ 安装

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

MIT License