vitepress-plugin-code-demo

Introduce

This project is based on vitepress and markdown-it implementation to display components and code examples in documents.

Installation

# npm
npm install vitepress-plugin-code-demo --save-dev

# yarn 
yarn add vitepress-plugin-code-demo -D

# pnpm
pnpm add vitepress-plugin-code-demo

Usage

configure in your vitepress/theme entry file

// ./vitepress/theme/index.ts
import { Demo, ApiTable } from '@vitepress-plugin-code-demo/components';

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.component('Demo', Demo);
    app.component('ApiTable', ApiTable);
  }
}

configure in your vite config

// vite.config.ts
import { defineConfig } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { MarkdownTransform } from 'vitepress-plugin-code-demo';
import vueDocgenPlugin from 'vite-plugin-vue-docgen';

export default defineConfig(async ({ mode }) => {
  return {
    plugins: [
      vueJsx(),
      vueDocgenPlugin(),
      MarkdownTransform(),
    ],
  };
})

configure markdown to add plugin

// ./vitepress/config.ts
import { defineConfig } from 'vitepress'
import { codeDemoPlugin } from 'vitepress-plugin-code-demo';

export default defineConfig({
  markdown: {
    config(md) {
      md.use(codeDemoPlugin({
        exampleRoot: resolve(__dirname, '../'),
      }))
    }
  }v
})

Preview

<!-- normal -->
::: demo src="pro-button/normal"
:::

<!-- iframe -->
::: demo src="pro-button/normal" iframe
:::

or

<!-- normal -->
<Demo src="pro-button/normal" />

<!-- iframe -->
<Demo src="pro-button/normal" iframe height="200" />

API

| prop | desc | type | | ---- | ---- | ---- | | src | The path is relative to the examples directory, omitting the .vue suffix | string | | iframe | use ifame mode, default false | boolean | | height | iframe height, such as '200' | number |