Import markdown file as vue component in vite.
npm install vite-plugin-markdown-to-componentA plugin based on vite-plugin-markdown combines markdown-it-attrs & KaTex enables you to import a Markdown file as Vue component on your vite project.
``
npm i -D vite-plugin-markdown-to-component
`js
// vite.config.js
/ commonjs /
const mdPlugin = require('vite-plugin-markdown-to-component');
const options = {};
module.exports = {
plugins: [mdPlugin(options)]
}
/ esm /
import mdPlugin from 'vite-plugin-markdown-to-component'
module.exports = {
plugins: [mdPlugin.plugin(options)] // use mdPlugin.plugin API under esm mode
}
`
> [toc] syntax is now optional supported as well. You sholud write [toc] on top as using this featrue.
> Btw, you can wrap certain blocks by ^^^ syntax, and use formula wrapped with $$ (see example belows).
`md
[toc]t1
t1-2 {.t2}
p1
^^^ {.wrapper-class}
> wrapped-block-1
wrapped-block-2
^^^
ˋˋˋjs {.c2 data-c=hello}
var c = 1;
var d = 2;
ˋˋˋ
$$KaTeX-formula^2$$
output:
html
- t1
- t1-2
- t2
- t2-1
- t2-1-1
t1
t2
p1
t2
var a = 1;
var b = 2;
wrapped-block-1
wrapped-block-2
var c = 1;
var d = 2;
t2-1
t2-1-1
`$3
js
`$3
use \
instead of \\\ to present a backquote inner 
More details see vite-plugin-markdown#options and https://github.com/arve0/markdown-it-attrs#usage.
MIT