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 '<div class="table-container"><table class="table">';
            };
            MarkdownIt.renderer.rules.table_close = function () {
              return '</table></div>';
            };
            return Source;
          }
        }
 }

相关页面

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

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

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

样式

index.html 文件加入以下代码

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

 <script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 <script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
 <script>hljs.initLineNumbersOnLoad();</script>
 //行内数学公式
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript"></script>

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

    <style>
        .hljs-line-numbers {
            text-align: right;
            //以下3行要加 !important 来避免样式覆盖
            border-right: 1px solid #ccc !important;
            margin-right: 10px !important;
            padding-right: 5px !important;
            color: #999;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

页面引入

---

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