@ruabick/md-demo-plugins 与 @ruabick/vitepress-demo-block 配合使用在 VirePress 里面支持demo-block。

步骤 1: 增加 markdown 插件

安装插件 pnpm add @ruabick/md-demo-plugins -D

// .vitepress/config.js
import { applyPlugins } from '@ruabick/md-demo-plugins';

export default defineConfig({
  markdown: {
    config: (md) => {
      applyPlugins(md);
    },
  },
});

步骤 2: 注册 demo 组件

安装插件 pnpm add @ruabick/vitepress-demo-block -D

// docs/.vitepress/theme/index.ts
import DemoBlock from '@ruabick/vitepress-demo-block';
import '@ruabick/vitepress-demo-block/dist/style.css';

export default {
  ...DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    app.component('demo', DemoBlock);
  },
};

步骤 3: 修改 VitePress Code Blocks 样式 （可选）

VitePress 默认 Code Blocks 是黑色，与 demo 样式不太符合，所以建议修改 Code Blocks 样式。

Code Blocks 样式在这里