Vitepress component demo block in markdown.

npm i -D vitepress-plugin-component-demo

Directory Structure

.
├── docs
│   ├── .vitepress
│   │   ├── components
│   │   │   ├── function1.vue
│   │   │   └── function2.vue
│   │   ├── theme
│   │   │   └── index.ts
│   │   └── config.mts
│   └── README.md

config.mts

import { defineConfig } from 'vitepress';
import vitePlugin from 'vitepress-plugin-component-demo/lib/es/vite-plugin';

export default defineConfig({
  vite: {
    plugins: [vitePlugin()]
  }
})

theme/config.ts

import DefaultTheme from 'vitepress/theme';

import type { Theme } from 'vitepress';

import { enhanceApp } from 'vitepress-plugin-component-demo';

export default {
  extends: DefaultTheme,
  enhanceApp(context) {
    enhanceApp(context);
  },
} as Theme;

README.md

# Title

description...

## Function1

<demo name="function1" />

Result

Use custom demo block:

.
├── docs
│   ├── .vitepress
│   │   ├── components
│   │   │   ├── custom-demo.vue

custom-demo.vue

<template>
  <div v-html="code"></div>
</template>

<script>
import { getDemo } from "vitepress-plugin-component-demo/lib/es/demo-codes.js";

export default {
  props: {
    name: String,
  },
  data() {
    return {
      code: ''
    }
  },
  mounted() {
    getDemo(this.name).then((res) => {
      this.code = res.code;
    })
  }
};
</script>

README.md

<custom-demo name="function1" />