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