vitepress-plugin-wavedrom

Add wavedrom support for vitepress

Caution

WIP it works in dev mode, but may fail in production mode. (Add onMounted deps to Wavedrom.vue may help)

The plugin is not tested well, and it does not support dark skin. Please report any issues.

Also, wavedrom may load slowly.

Installation

npm install wavedrom
npm install vitepress-plugin-wavedrom

Usage

Register component globaly.

// .vitepress/theme/index.ts
import DefaultTheme from "vitepress/theme";
import WavedromVue from 'vitepress-plugin-wavedrom/Wavedrom.vue';

export default {
    ...DefaultTheme,
    enhanceApp({ app }) {
        app.component("WavedromVue", WavedromVue);
    }
}

If you are annoyed with the error of the missing declaration of vue component, you can create a file named shim.d.ts.

// shim.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Add configuration.

// .vitepress/config.ts
import wavedromPlugin from 'vitepress-plugin-wavedrom';
export default defineConfig({
    markdown: {
        config: md => {
            md.use(wavedromPlugin);
        }
    }
})

Use in any markdown file.

{ signal: [
    { name: "clk",  wave: "P......" },
    { name: "bus",  wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
    { name: "wire", wave: "0.1..0." }
]}

Inspiration

vitepress-plugin-mermaid