WangXueZhi / vite-plugin-md2vue

transform markdown module to vue component

vite-plugin-md2vue

中文文档

Introduction

vite plugin, import markdown module as vue3 component. Note that this plugin only supports vue3!

Install

npm i vite-plugin-md2vue --save-dev

yarn add vite-plugin-md2vue -D

Use

// vite.config.js
import { defineConfig } from "vite";
import vitePluginMd2Vue from "vite-plugin-md2vue";

export default defineConfig({
  ...
  plugins: [vue(), vitePluginMd2Vue()]
});

// xx.vue
<template>
  <Start />
</template>

<script>
import { defineComponent } from 'vue'
import Start, { headings, codeBlocks }  from 'docs/start.md'

export default defineComponent({
  name: 'App',
  components: {
    Start
  },
})
</script>

module exports

name	describe	type
default	vue component
headings	markdown headings list	{text:string, level: number, raw: string}[]
codeBlocks	markdown code block list	{code: string, infostring: string}[]

Options

name	type	describe
renderWrapperClass	string	as outer container's class attribute
markedOptions	object	marked's setOptions config
markedRender	object	marked's render config
mermaidLoadingHtml	string	mermaid loading before rendered, to replace default loading, html must contain mermaid-loading as class attribute

mermaid

You can create diagrams and visualizations using Mermaid. You need to add mermaid as code block language.

//```mermaid
// mermaid code here
// ...
//```