Quick Start

Installation

Choose your preferred package manager for installation:

npm install vitepress-demo-plugin -D

yarn add vitepress-demo-plugin -D

pnpm add vitepress-demo-plugin -D

Import Plugin

Add the following code to .vitepress/config.ts to import the vitepressDemoPlugin:

import { defineConfig } from 'vitepress';
import { vitepressDemoPlugin } from 'vitepress-demo-plugin'; 
import path from 'path';

export default defineConfig({
  // other configs...
  markdown: { 
    config(md) { 
      md.use(vitepressDemoPlugin); 
    }, 
  }, 
});

Vue Demo

You can set path of .vue file by <demo vue="xxx/path" /> in .md file, render this vue component and display source code.

<demo vue="../demos/demo.vue" />

The corresponding rendering result is as follows:

Html Demo

You can set path of .html file by <demo html="xxx/path" /> in .md file, render this html file and display source code.

<demo html="../demos/demo.html" />

The corresponding rendering result is as follows:

React Demo

Tip

If you want to display React Demo in your vitepress site, you need install related decencies by command below

npm install react react-dom -D

You can set path of .jsx/.tsx file by <demo react="xxx/path" /> in .md file, render this html file and display source code.

<demo react="../demos/demo.tsx" />

The corresponding rendering result is as follows:

---

Mixed Demo

Tip

Same as above, if you want to display React Demo in your vitepress site, you need to execute the following command to install the corresponding dependencies:

npm install react react-dom -D

You can specify multiple vue/react/html in <demo /> at the same time to display demos with different syntaxes in one block.

<demo
  vue="../demos/demo.vue"
  react="../demos/demo.tsx"
  html="../demos/demo.html"
/>

The corresponding rendering result is as follows:

Title And Description

Set demo title and description by title 和 description:

<demo
  vue="../demos/demo.vue"
  react="../demos/demo.tsx"
  html="../demos/demo.html"
  title="Multiple Syntax DEMO"
  description="This is an example of a mixed demo. You can use title and description to specify the title and description of the demo."
/>

The corresponding rendering result is as follows:

Open Github And Gitlab

You can add link by github and gitlab in <demo />. It will navigate to corresponding address.

<demo
  vue="../demos/demo.vue"
  github="https://github.com/zh-lx/vitepress-demo-plugin/blob/main/packages/docs/demos/demo.vue" 
/>

The corresponding rendering result is as follows:

For GitLab, the usage is the same as GitHub. Simply replace github with gitlab.