Quick Start
This section of the documentation is identical to vitepress-demo-plugin.
Installation
Choose your preferred package manager for installation:
npm install vitepress-better-demo-plugin -Dyarn add vitepress-better-demo-plugin -Dpnpm add vitepress-better-demo-plugin -DImport Plugin
Add the following code to .vitepress/config.ts to import the vitepressDemoPlugin:
import { defineConfig } from 'vitepress';
import { vitepressDemoPlugin } from 'vitepress-better-demo-plugin';
import path from 'path';
export default defineConfig({
// other configs...
markdown: {
config(md) {
md.use(vitepressDemoPlugin);
},
},
});Vue Demo
You can set the path of a .vue file using <demo vue="xxx/path" /> in an .md file; this renders the Vue component and displays its source code.
<demo vue="../demos/demo.vue" />The corresponding rendering result is as follows:
HTML Demo
You can set the path of an .html file using <demo html="xxx/path" /> in a .md file; this renders the HTML and displays its source code.
<demo html="../demos/demo.html" />The corresponding rendering result is as follows:
React Demo
Tip
If you want to display React demos in your VitePress site, install the required dependencies using the following command
npm install react react-dom -DYou can set the path of a .jsx/.tsx file using <demo react="xxx/path" /> in an .md file; this renders the React component and displays its source code.
<demo react="../demos/demo.tsx" />The corresponding rendering result is as follows:
Mixed Demo
Tip
Same as above, to display React demos in your VitePress site, run the following command to install the required dependencies:
npm install react react-dom -DYou can specify multiple syntaxes (e.g. vue, react, html) in a single <demo /> to display different demo formats 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 the demo title and description using title and 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 on GitHub and GitLab
You can add a github or gitlab link to <demo /> that navigates to the corresponding address.
<demo
vue="../demos/demo.vue"
github="https://github.com/hezhengxu2018/vitepress-better-demo-plugin/blob/main/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.