@vitepress-demo/plugins NPM

中文 | English

Vitepress Demo

适用于 Vitepress 组件演示插件

前往演示

特性

原生主题

演示组件整体外观继承自原生极简主义风格

原生构建

通过 Vite 将路径和源码转换为临时模块，实现组件隔离

原生渲染

标题，描述，代码高亮均经过原生 Markdown 渲染

多种方式

支持相对路径和源码块作为演示内容

安装

终端 npm

npm i @vitepress-demo/plugins @vitepress-demo/components

配置 .vitepress/config.mts

import { defineConfig } from "vitepress";
import { demoMarkdownPlugin, demoVitePlugin } from "@vitepress-demo/plugins";

export default defineConfig({
  // 其它配置...
  markdown: {
    config(md) {
      md.use(demoMarkdownPlugin);
    },
  },
  vite: {
    plugins: [demoVitePlugin()],
  },
});

配置 .vitepress/theme/index.ts

// 其它导入...
import { Demo } from "@vitepress-demo/components";

export default {
  // 其它配置...
  enhanceApp({ app, router, siteData }) {
    app.component("Demo", Demo);
  },
} satisfies Theme;

用法

相对路径

::: demo 尺寸 | 下列尺寸分别为 `large`, `middle`, `small`, `24px`
demo/IconSize.vue
:::

代码围栏

::: demo _颜色_ | 为 **图标** 指定一种 **_`颜色`_**

```js
<template>
  <Space>
    <Icon color="turquoise">
      <!-- 替换为聚焦注释 -->
      <ArrowCircleRight />
    </Icon>
    <Icon color="#d0d080">
      <!-- 替换为聚焦注释 -->
      <ArrowCircleRight />
    </Icon>
  </Space>
</template>

<script setup lang="ts">
import Icon from "../components/Icon.vue"; // 替换为聚焦注释
import Space from "../components/Space.vue";
import ArrowCircleRight from "../icons/ArrowCircleRight.vue";
</script>
```

:::