vite-plugin-vitepress-demo v2.2.1

vite-plugin-vitepress-demo

基于vitepress实现的自定义代码块的功能

安装

yarn add vite-plugin-vitepress-demo
# or
npm i vite-plugin-vitepress-demo

使用

创建.vitepress在config.ts中引入

// config.ts

import { defineConfig } from "vitepress"
import { vitePluginVitepressDemo } from "vite-plugin-vitepress-demo"
export default defineConfig({
    vite:{
        plugins:[
            vitePluginVitepressDemo()
        ]
    }
})

创建.vitepress/theme/index.ts中使用代码块

// theme/index.ts
import ThemeDefault from "vitepress/dist/client/theme-default"
import { Theme } from "vitepress";
import DemoBlock from "vite-plugin-vitepress-demo/dist/demo/index.vue";

export default {
    ...ThemeDefault,
    enhanceApp:({app}) => {
        app.component('demo',DemoBlock);
    }
} as Theme

使用代码块

引入代码块：

<demo src="./example/Test.vue"></demo>

增加标题

<demo src="./example/Test.vue" title="标题"></demo>

增加描述
<demo src="./example/Test.vue" title="标题">
<desc>
增加代码描述
    ```js
    console.log('desc')
    ```
</desc>
</demo>

增加`codeSandbox`

<demo codeSandbox="https://codesandbox.io/" src="./example/Test.vue" title="测试" desc="描述信息`codeSandbox`"></demo>