https://github.com/weiquanju/vuepress-plugin-demo-code-block

vuepress plugin demo block
https://github.com/weiquanju/vuepress-plugin-demo-code-block

block code demo tsx vue3 vuepress-plugin

Last synced: 1 day ago
JSON representation

vuepress plugin demo block

• Host: GitHub
• URL: https://github.com/weiquanju/vuepress-plugin-demo-code-block
• Owner: weiquanju
• Created: 2022-05-04T04:01:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-01T08:54:45.000Z (11 months ago)
• Last Synced: 2025-01-09T02:09:00.765Z (17 days ago)
• Topics: block, code, demo, tsx, vue3, vuepress-plugin
• Language: Vue
• Homepage:
• Size: 53.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## vuepress plugin demo code block

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

support: vuepress2, vue3, github edit online, tsx

## 安装 Install

```shell

npm i -D vuepress-plugin-demo-code-block

yarn add -D vuepress-plugin-demo-code-block

pnpm add -D vuepress-plugin-demo-code-block

```

## 配置 Config

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

Configuration file: `docs/.vuepress/config.ts`

```ts

import { defineUserConfig } from 'vuepress'

import path from 'path'

import demoBlock from 'vuepress-plugin-demo-code-block'

export default defineUserConfig({

  plugins: [

    [

      demoBlock({

        componentsDir: new URL(import.meta.url, './../examples'), // 组件目录路径, Component directory path

        githubEditLinkPath: 'https://github.com/weiquanju/v-el-table-doc/edit/main/docs/examples/', // github编辑地址路径, the path of github edit link 

      })

    ]

  ],

})

```

## 使用 Usage

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

Create `Hello.vue` in  path of `docs/examples` 

```vue

    
Hello world!


```

```md

:::demo

Hello

:::

```

### 截图 Screenshot

![Hello.vue example show](https://github.com/weiquanju/vuepress-plugin-demo-code-block/raw/main/.docs/hello.png?1)

![Hello.vue example show](https://github.com/weiquanju/vuepress-plugin-demo-code-block/raw/main/.docs/hello_open.png?1)

## VuePress with tsx

项目配置参考如下

The project configuration reference is as follows

`tsconfig.json`

```json

{

  "compilerOptions": {

    "baseUrl": "./",

    "strict": true,

    "sourceMap": true,

    "resolveJsonModule": true,

    "esModuleInterop": true,

    "target": "esnext",

    "module": "esnext",

    "moduleResolution": "node",

    "isolatedModules": true,

    "jsx": "preserve",

    "typeRoots": [

      "node_modules/@types"

    ],

    "types": [

      "vite/client",

      "@vuepress/client/types"

    ],

    "lib": [

      "esnext",

      "scripthost"

    ],

  },

  "include": [

    "docs/examples/**/*"

  ]

}

```

`docs/.vuepress/vite.config.ts`

```ts

import { defineConfig } from 'vite'

import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vueJsx({

      transformOn: true,

    }),

  ],

  esbuild: {

    jsxFactory: 'h',

    jsxFragment: 'Fragment',

  },

})

```

`docs/.vuepress/config.ts`

```ts

import { defineUserConfig, defaultTheme } from 'vuepress'

import { viteBundler } from '@vuepress/bundler-vite'

import path from 'path'

import demoBlock from './plugin/vuepress-plugin-demo-block/src'

export default defineUserConfig({

  ...

  bundler: viteBundler({

    viteOptions: {

      configFile: path.resolve(__dirname, './vite.config.ts'),

      // envFile?: false;F

    },

    vuePluginOptions: {},

  })

  ...

})

```