vue How to introduce markdown Exhibition md file And support style


On the way to encapsulate component library There is a problem , Exhibition md file ! A lot of ways on the Internet are simply to md The document was converted to html, I found a lot of information . It turns out to be simple !

<>1.webpack.base.conf.js Join in
{ test:/\.md$/, loader:'vue-markdown-loader', // options:vueMarkdown, },
vue3.0 vue.config.js module.exports = { chainWebpack: config => { config.module
.rule('md') .test(/\.md$/) .use('vue-loader') .loader('vue-loader') .end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler') .options({ raw: true }) }
<>2.cnpm i vue-markdown-loader -D

Install plug-ins .

<>3.cnpm install github-markdown-css

At this time md The file was just converted to vue Get components The corresponding style is missing I've been looking for it on the Internet for a long time github-markdown-css
And introduce style
import 'github-markdown-css/github-markdown.css'
<>4. container

problem ： Finally, it is found that the highlight of the code cannot be displayed .

Find the corresponding css Manually in the commong.less Add in

It's a stupid way , If there is good support , Please share

Technology
©2020-2025 ioDraw All rights reserved, Privacy Policy