vue解析markdown文件并展示（代码高亮+代码行号显示）

因为项目需要吧！然后让我看下 vue 解析 markdown 文件怎么处理

然后我就开始了茫茫求学路 茫茫百度谷歌之旅

为时不知道多少天，总算搞出点效果了吧！！记录一下

---

搜的时候看到了很多插件，最后用的是 vue-markdown-loader

下载相关依赖

markdown插件

npm i vue-markdown-loader@0 -D

markdown样式表

npm install --save github-markdown-css 

代码高亮及行号的依赖

npm install --save highlightjs-line-numbers.js

相关配置

在 webpack.base.config.js 文件里添加：

{
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: {
          preprocess: function (MarkdownIt, Source) {
            MarkdownIt.renderer.rules.table_open = function () {
              return '
';};
            MarkdownIt.renderer.rules.table_close =function(){return'
';
            };
            return Source;
          }
        }
 }

相关页面

我这里用的是 App.vue 页面
引入：

import 'highlight.js/styles/github.css'
import 'github-markdown-css'

把之前的 id = "app" 改成 class = "markdown-body" 以匹配样式表

样式

index.html 文件加入以下代码

 "https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>

 
 
 
 
 //行内数学公式
 

行号插件 highlightjs-line-numbers.js 的样式要自己调整一下

页面引入

---

这样就差不多ok啦~
可以显示表格、代码高亮、代码行号然后标题图片啥的
但是跨行数学公式还不太行
先这样吧！
看下效果~（部分）