vite-plugin-markdown-vue

Vite plugin for converting markdown into Vue components.

Part of the code is copied and modified from Element-plus.

Docs | Example

Feature

• ✨ Support block demo for writing component cases.
• ✨ Support writing JS logic code and style.
• ✨ Code block support highlights lines.

Usage

• 1、Install

npm install -D vite-plugin-markdown-vue
# or
yarn add -D vite-plugin-markdown-vue

• 2、Configure vite

1// vite.config.js
2import { defineConfig } from 'vite'
3import vue from '@vitejs/plugin-vue'
4import markdown from 'vite-plugin-markdown-vue'
5
6// https://vitejs.dev/config/
7export default defineConfig({
8  plugins: [markdown(), vue({
9    include: [/\.vue$/, /\.md$/]
10  })]
11})

• 3、Define the 'demo-block' component and register it with the global.

demo-block component use for block demo.

1<!-- ./components/demo-block.vue -->
2<template>
3  <div class="demo-block">
4    <div class="source"><slot name="source"></slot></div>
5    <div class="meta">
6      <div class="description"><slot></slot></div>
7      <div class="highlight"><slot name="highlight"></slot></div>
8    </div>
9  </div>
10</template>
11
12<script>
13export default {
14  name: 'demo-block'
15}
16</script>

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import { DemoBlock } from 'vite-plugin-markdown-vue/components'
5// or
6// import DemoBlock from './components/demo-block.vue'
7
8import 'highlight.js/styles/color-brewer.css'
9
10const app = createApp(App)
11app.component('demo-block', DemoBlock) // register `demo-block` component.
12app.mount('#app')

Demo

1<template>
2  <Demo />
3</template>
4<script>
5import Demo from './demo.md'
6export default {
7  components: {
8    Demo
9  }
10}
11</script>

Options

1// vite.config.js
2export default defineConfig({
3  plugins: [
4    markdown({
5      // Class names for the wrapper
6      className: 'content',
7      // options for markdown-it
8      markdown: {
9        // ...
10        // init
11        setup (md) {
12          md.use(otherPlugin())
13        }
14      }
15    }), 
16    vue({
17      include: [/\.vue$/, /\.md$/]
18    })
19  ]
20})