vuepress plugin demo code block

支持：vuepress2，vue3，github在线编辑，tsx

support: vuepress2, vue3, github edit online, tsx

安装 Install

1npm i -D vuepress-plugin-demo-code-block
2
3yarn add -D vuepress-plugin-demo-code-block
4
5pnpm add -D vuepress-plugin-demo-code-block

配置 Config

配置文件： docs/.vuepress/config.ts

Configuration file: docs/.vuepress/config.ts

1import { defineUserConfig } from 'vuepress'
2import path from 'path'
3import demoBlock from 'vuepress-plugin-demo-code-block'
4
5export default defineUserConfig({
6  plugins: [
7    [
8      demoBlock({
9        componentsDir: path.resolve(__dirname, './../examples'), // 组件目录路径, Component directory path
10        githubEditLinkPath: 'https://github.com/weiquanju/v-el-table-doc/edit/main/docs/examples/', // github编辑地址路径, the path of github edit link 
11      })
12    ]
13  ],
14})

使用 Usage

路径: docs/examples 里创建Hello.vue

Create Hello.vue in path of docs/examples

1<template>
2    <h1>Hello world!</h1>
3</template>

1:::demo
2Hello
3:::

截图 Screenshot

VuePress with tsx

项目配置参考如下

The project configuration reference is as follows

tsconfig.json

1{
2  "compilerOptions": {
3    "baseUrl": "./",
4    "strict": true,
5    "sourceMap": true,
6    "resolveJsonModule": true,
7    "esModuleInterop": true,
8    "target": "esnext",
9    "module": "esnext",
10    "moduleResolution": "node",
11    "isolatedModules": true,
12    "jsx": "preserve",
13    "typeRoots": [
14      "node_modules/@types"
15    ],
16    "types": [
17      "vite/client",
18      "@vuepress/client/types"
19    ],
20    "lib": [
21      "esnext",
22      "scripthost"
23    ],
24  },
25  "include": [
26    "docs/examples/**/*"
27  ]
28}

docs/.vuepress/vite.config.ts

1
2import { defineConfig } from 'vite'
3import vueJsx from '@vitejs/plugin-vue-jsx'
4
5// https://vitejs.dev/config/
6export default defineConfig({
7  plugins: [
8    vueJsx({
9      transformOn: true,
10    }),
11  ],
12  esbuild: {
13    jsxFactory: 'h',
14    jsxFragment: 'Fragment',
15  },
16})
17

docs/.vuepress/config.ts

1import { defineUserConfig, defaultTheme } from 'vuepress'
2import { viteBundler } from '@vuepress/bundler-vite'
3import path from 'path'
4import demoBlock from './plugin/vuepress-plugin-demo-block/src'
5
6export default defineUserConfig({
7  ...
8  bundler: viteBundler({
9    viteOptions: {
10      configFile: path.resolve(__dirname, './vite.config.ts'),
11      // envFile?: false;F
12    },
13    vuePluginOptions: {},
14  })
15  ...
16})