@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

安装

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

插件配置

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

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

import { defineConfig } from 'vite'
import VitePluginVitepressDemo from '@pzy915/vite-plugin-vitepress-demo'

export default defineConfig({
  plugins: [
    VitePluginVitepressDemo(),
  ],
})

插件属性

• 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中导入组件：

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Demo', AntdTheme)
  },
} as Theme

在markdown中使用

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

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

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

源码模式

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

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

使用描述使用markdown渲染

在demos/basic.vue中：

<docs>
---
title: Test Title
---

Hello World This is Test Docs block code in `docs.vue`.

</docs>

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const msg = ref('Hello World')
</script>

在markdown中：

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