vue 展示md文件 并支持md样式

在封装组件库时，想要把md文件直接嵌套在页面内，并保证md的样式不变，网上找了很多方法都是v-html，只展示md文件的内容，样式并没有保存，下面说一下，我查完资料之后使用的方法。

image.png

1.在webpack.base.conf.js 的规则rules加入

{

        test:/\.md$/,

        loader:'vue-markdown-loader',

        // options:vueMarkdown,

  },

2.安装插件

cnpm i vue-markdown-loader -D

3.加载md的样式

cnpm install github-markdown-css

在main.js中将github-markdown-css导入

image.png

4.使用

image.png

引用markdown-body样式类，将md文件导入，并引入在页面上即可。

5.注意

完成以上操作时，代码不能高亮显示，只需在项目中的公共css中加如下代码片段即可

/* markdown 高亮 */

.hljs-name{

    color: #22863a;

}

.hljs-attr{

    color: #6f42c1;

}

.hljs-keyword{

    color: red;

}

.hljs-string{

    color: #032f62;

}