@pzy915/vite-plugin-vitepress-demo

该项目于2023年1月11日 fork自 vite-plugin-vitepress-demo (版本:2.0.0-alpha.8), 所作的改动为:给AntdTheme组件(对应源代码为src/theme/antd/index.vue)新增了otherSrcArr属性，用于非源码模式下，除了显示src对应文件的源代码外，同时也显示otherSrcArr中指定的对应文件的源代码

对应的 vitepress版本: 1.0.0-alpha.31

一个基于vite的插件，用于vitepress的演示代码块。

如果你现在正在用vuepress，如果你也想实现类似的功能，可以尝试一下vuepress-plugin-code-block

安装

1npm i @pzy915/vite-plugin-vitepress-demo -D
2

插件配置

当前包是一个Pure ESM包，确保当前项目中的package.json中包含"type": "module"。

在vite.config.[jt]s中做如下配置：

1import { defineConfig } from 'vite'
2import VitePluginVitepressDemo from '@pzy915/vite-plugin-vitepress-demo'
3
4export default defineConfig({
5  plugins: [
6    VitePluginVitepressDemo(),
7  ],
8})

插件属性

• glob: string | string[]

  指定需要处理的文件，支持glob语法，默认为./**/demos/*.vue。

• base: string

  指定从哪个文件夹进行监听，默认同vite配置的root。

• exclude: string[]

  指定需要排除的文件，支持glob语法，内置：['**/node_modules/**', '**/dist/**', '**/build/**', '**/test/**', '**/tests/**', '**/__tests__/**']默认会排除.vitepress。如果你不想排除.vitepress那么你可以设置exclude:[]。

• markdown: 同vitepress配置的markdown。

实验性

目前对于jsx的支持还处于实验阶段，可能会有一些不稳定的地方

组件配置

在2.x版本中，我们支持了自定义组件，但是自定义组件必须和内置组件具有相同的API。

如若我们的自带的主题满足不了你们的需求，那么你可以参考我们的默认主题自定义自己的主题。

同时也欢迎大家提交PR，让我们的主题更加完善。

导入组件

在.vitepress/theme/index.[jt]s中导入组件：

1import type { Theme } from 'vitepress'
2import DefaultTheme from 'vitepress/theme'
3import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
4
5export default {
6  ...DefaultTheme,
7  enhanceApp({ app }) {
8    app.component('Demo', AntdTheme)
9  },
10} as Theme

在markdown中使用

1<demo src="./demos/basic.vue" title="标题" desc="描述"></demo>

1<demo src="./demos/basic.vue"  :other-src-arr="['./demos/docs.vue']" title="标题" desc="描述"></demo>

1<demo src="./demos/basic.vue"  :otherSrcArr="['./demos/docs.vue']" title="标题" desc="描述"></demo>

源码模式

1<demo src="./demos/basic.vue" raw></demo>

p.s. 源码模式下不支持otherSrcArr属性，即使配置了也无效

使用描述使用markdown渲染

在demos/basic.vue中：

1<docs>
2---

3title: Test Title
4---
5

6Hello World This is Test Docs block code in `docs.vue`.
7
8</docs>
9
10<template>
11  <div>
12    {{ msg }}
13  </div>
14</template>
15
16<script lang="ts" setup>
17import { ref } from 'vue'
18
19const msg = ref('Hello World')
20</script>

在markdown中：

1<demo src="./demos/docs.vue"></demo>