vitepress示例代码插件 #

项目地址 #

源码仓库: @pzy915/vite-plugin-vitepress-demo

npm 地址: @pzy915/vite-plugin-vitepress-demo

作用 #

该插件项目 fork 自 vite-plugin-vitepress-demo (版本:2.0.0-alpha.8), 但扩展了原插件的功能，新增了otherSrcArr属性，用于非源码模式下，除了显示src对应文件的源代码外，同时也显示otherSrcArr中指定的对应文件的源代码

安装 #

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

使用 #

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

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

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

在.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

插件属性 #

• 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。

在 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>