给VitePress增加代码演示功能 | 自律小屋

当前页大纲

⚡

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

🏄‍♂️ 插件包

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