vite-plugin-md2html
A plugin to transfrom markdown to html in your vite project
Setup
Install
npm i -D vite-plugin-md2html # yarn add vite-plugin-md2html -DAdd 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
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"
}]
}
]
