@vue-hooks-plus/vitepress-demo-block
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

@ruabick/md-demo-plugins@ruabick/vitepress-demo-block 配合使用在 VirePress 里面支持demo-block

步骤 1: 增加 markdown 插件

安装插件 pnpm add @ruabick/md-demo-plugins -D

// .vitepress/config.js
import { applyPlugins } from '@vue-hooks-plus/md-demo-plugins'

export default defineConfig({
  markdown: {
    config: md => {
      applyPlugins(md)
    },
  },
})

步骤 2: 注册 demo 组件

安装插件 pnpm add @vue-hooks-plus//vitepress-demo-block -D

// docs/.vitepress/theme/index.ts
import DemoBlock from '@vue-hooks-plus//vitepress-demo-block'
import '@vue-hooks-plus//vitepress-demo-block/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    app.component('demo', DemoBlock)
  },
}

步骤 3: 修改 VitePress Code Blocks 样式 (可选)

VitePress 默认 Code Blocks 是黑色,与 demo 样式不太符合,所以建议修改 Code Blocks 样式。

Readme

Keywords

none

Package Sidebar

Install

npm i @vue-hooks-plus/vitepress-demo-block

Weekly Downloads

3

Version

1.0.5

License

MIT

Unpacked Size

23.1 kB

Total Files

11

Last publish

Collaborators

  • hazelwei
  • yongjie