vitepress-demo-block-fd

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

步骤 1: 增加 markdown 插件

安装插件 pnpm add md-demo-plugins-fd -D

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

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

步骤 2: 注册 demo 组件

安装插件 pnpm add vitepress-demo-block-fd -D

// docs/.vitepress/theme/index.ts
import DemoBlock from 'vitepress-demo-block-fd';
import '@freeDoc/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 样式在这里