vite-plugin-md2html

A plugin to transfrom markdown to html in your vite project

• Demo
• Demo Project Path

Setup

Install

npm i -D vite-plugin-md2html # yarn add vite-plugin-md2html -D

Add it to vite.config.js

// vite.config.js
import md2HtmlPlugin from 'vite-plugin-md2html'

export default {
  plugins: [
    md2HtmlPlugin(options)
  ],
}

And import it in project

import {html} from './introduction.md'

Use in .vue

<template>
  <p v-html="html"></p>
</template>

<script>
import {html} from './introduction.md'

export default {
 setup(){
   return {
     html
   }
 }
}
</script>

options

markdownIt?: MarkdownIt.Options

Examples

// highlight code example

import md2HtmlPlugin from 'vite-plugin-md2html'
import hljs from 'highlight.js';
let options = {
    markdownIt: {
        html: true,
        highlight: function (str, lang) {
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return hljs.highlight(lang, str).value;
                } catch (__) {}
            }

            return ''; // use external default escaping
        }
    }
}
export default {
  plugins: [
    md2HtmlPlugin(options)
  ],
}

Other Meta data

Nested header demo

import {nestedHeaders} from './introduction.md

// nestedHeaders example
[
    {
        level: 1,
        title: "h1",
        children: [
            {
                level: 2,
                title: "h2",
                children: [{ 
                  level: 3,
                  title: "h3"
                }]
            },
            {
                level: 2,
                title: "h2",
                children: [{ 
                  level: 3 ,
                  title: "h3"
                }]
            }
        ]
    },
    { 
        level: 1, 
        title: "h1",
        children: [{ 
          level: 2 ,
          title: "h2"
        }] 
    }
]