# vitepress-plugin-code-demo

## Introduce

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

## Installation

```shell
# 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

```ts
// ./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

```ts
// 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

```ts
// ./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

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

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

or

```md
<!-- 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 |