v-poc/vpressdemo

Support demo import and preview for vitepress.

vpressdemo

INTRODUCTION

This is a lightweight demo to demonstrate demo import and preview based on VitePress.

Usage

npm i -D vpressdemo shiki

// .vitepress/config.ts / config.js
import vpressdemo from "../node_modules/vpressdemo/dist";
// ...
export default {
  // ...
  markdown: {
    // ...
    config: (md) => {
      md.use(vpressdemo);
    },
  },
};

// .vitepress/theme/index.ts / index.js
import DefaultTheme from "vitepress/theme";
import demo from "../../node_modules/vpressdemo/dist/demo.vue";
// ...
export default {
  ...DefaultTheme,
  // ...
  enhanceApp({ app }) {
    app.component("demo", demo);
  },
};

<demo src="./helloworld.vue" desc="Description: The Hello World Demo"></demo>

Project setup

How to setup your project

pnpm i

Compiles and hot-reloads for development

pnpm start

Compiles and minifies for production

pnpm run build

Customize configuration

About vite, please check Configuration Reference - vite.

License