PS：原插件作者不更新了，还有很多 bug 呢，那么我就来自己 fork 更新一波

欢迎提出您的 Issue，我看到就会尝试修复，也欢迎各位的 PR

原本是打算取名为vitepress-demoblock-plus，但这名字在npm已经被注册了，所以plus就改为xr了

以下是原仓库文档，我将保留其文档内容，方便查阅

文档

官方文档 | 快速上手 | 组件演示

安装

我们建议您使用包管理器 (NPM,Yarn, pnpm 安装 vitepress-demoblock

# 选择一个你喜欢的包管理器

# NPM
npm install vitepress-demoblock-xr

# Yarn
yarn add vitepress-demoblock-xr

# pnpm
pnpm install vitepress-demoblock-xr

使用前请确保您安装了shiki库

# NPM
npm install shiki

# Yarn
yarn add shiki

# pnpm
pnpm install shiki

引入

先注册 vitepress-demoblock-xr 提供的 markdown 解析插件

// .vitepress/config.ts or .vitepress/config.js
import demoblock from "vitepress-demoblock-xr";
export default {
	// ...
	markdown: {
		// ...
		config: (md) => {
			md.use(demoblock);
		},
	},
};

再引入 vitepress-demoblock-xr 提供的 demo 组件

// .vitepress/theme/index.ts or .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'; //引入默认主题
import demo from 'vitepress-demoblock-xr/demo.vue'
export default {
    ...DefaultTheme,
    enhanceApp({ app }) {
        app.component('demo', demo)
    }

使用

输入

<demo src="../component/button.vue" desc="使用 `type`、`plain`、`round` 和 `circle` 来定义按钮的样式。"></demo>

输出