vue 如何引入markdown展示md文件 并支持样式

在封装组件库的路上 碰到了一个问题,展示md文档! 网上很多办法只是单纯的将md文件转成了html,找了很多资料。最后发现很简单!
vue 如何引入markdown展示md文件 并支持样式_第1张图片

1.webpack.base.conf.js 中加入

{
        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

安装插件。

3.cnpm install github-markdown-css

这时候md文件只是转成了vue得组件 缺少相应的样式 网上找了很久 github-markdown-css
并且引入样式

import 'github-markdown-css/github-markdown.css'

4.容器

vue 如何引入markdown展示md文件 并支持样式_第2张图片
问题:最后发现代码的高亮无法显示。
vue 如何引入markdown展示md文件 并支持样式_第3张图片
找到对应的css 手动在项目的commong.less中添加
vue 如何引入markdown展示md文件 并支持样式_第4张图片
这是一个笨的方法,如果有好的支持高亮,麻烦分享下哈

你可能感兴趣的:(vue,markdown)