vue4.0 显示md文件并实现代码高亮

vue4.0 显示md文件并实现代码高亮

---

强烈推荐：教你如何把markdown放在浏览器上展示，并选择一个好看的高亮主题

 需求描述:

  vue项目需要将后端传输来的md文件内嵌到页面当中，要求代码高亮，代码中有行数显示等。 ##  思路： ##  1、使用markdown-it、markedjs、mavon-enitor、hyperdown等工具将后端发送的md文件数据加上html标签，具体代码如下：

<script>
var md = require('markdown-it')({
    html:true
})
export default {
    data() {
        return {
            code:""
        }
    },
    created(){
        // 在模板编译进路由前调用created方法，触发接收函数
        this.getmd();
    },
    methods:{
        getmd:function(){
            axios({/*axios向后端发送请求的参数*/ })
            .then(( res )=>{ this.code = md.render(res.data)})
            .catch(( error )=>{ console.log( error ) })
        }
    }
}
</script>

此时直接使用v-html显示的话效果如下（插件存在差异）：

注意下面途中<code>标签之间的内容，在实现代码高亮时用的到。

2、得到md文件的html格式后，可以通过github-markdown-css，让效果更加逼近markdown。具体做法如下：

npm install github-markdown-css

在vue项目中的main.js引入css

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

在组件中使用css

<v-container v-html='code' class='markdown-body' ></v-container>

<style scoped>
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
    font-size:18px;
    text-align: left;
}
@media (max-width:80% ) {
    .markdown-body {
        padding: 15px;
    }
}
</style>

最后呈现的效果如下：
如果想要改变代码块中的背景和字体的颜色，需要直接修改github-markdown-css中的样式。
修改背景：

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa; 
  border-radius: 3px;
}

修改字体颜色等内容，修改地方不唯一，能应用到pre和code标签就行。

.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: monospace,monospace;
  font-size: 1em;
  color:white;//添加一行
}

3、通过prism.js实现代码高亮和行数。在vue项目中使用prism.js可以参考下面几篇blog：
  如何在vue中引入Prism.js
  Vue 中使用 prismjs 代码高亮组件
  在vue中使用prismjs，让页面代码变漂亮！

然而上述几篇blog的vue版本都<4.0，在vue 4.0中 .babelrc文件被babel.config.js取代自己尝试在babel.config.js中添加如下信息，并没有起到很好的作用。

  [
      "prismjs",
      {
        libraryName: 'prism',
        languages: ["html", "css", "javascript", "php", "dart", "bash", "nginx","python"],
        plugins: ["line-numbers", "line-highlight", "highlight-keywords"],
        themes: "funky"
      }
    ]

还有一个问题，就是直接使用prism.highlight()函数对后端返回的md文件进行处理，并不能够将<code>标签中的内容处理成下图所示（与前文对比）：
在查阅blog：vue中引入md文件，解析为组件并实现代码高亮后，通过编写正则函数提取html(md文件)中的<code>标签中的内容，然后在使用prisml.highlight()函数对其进行处理(代码如下)，可以实现上述图片中内容，从而实现代码高亮操作，但在babel.config.js中改变主题，页面渲染效果并不会改变。

let html = md.render(res.data) //res.data为后端传输md问价内容，md.render()则将其html化
html = html.replace(/(?<=<pre><code[^>]*?>)[\s\S]*?(?=<\/code><\/pre>)/gi,v=>{
    v=v.replace(/_&/g,' ').replace(/&quot;/g,'"').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
    console.log(v)
    //这里将Prism.languages.javascript 换成Prism.languages.python 浏览器中将会报错：TypeError: grammar is undefined
    return Prism.highlight(v,Prism.languages.javascript,"python"); 
});
this.code = html //this.code与v-html绑定

此外，通过在main.js中引入prismjs中的主题css，发现页面渲染的效果也会随之发生变化。这说明babel.config.js文件所添加的配置信息没有起到作用。笔者用尝试了其他几种写法，均未其作用。

后记：在使用markedjs将md文件html化的过程中，前期出现过在<code class=‘language-python’>，即出现css样式，这与其他网站代码块中的样式（如下）相似，但页面渲染不起作用，后来经过大量更改时，css样式消失。



后记：通过调节github-markdown-css中的样式，最后呈现的效果如下，除没有实现line-highlight外，发现效果还行。
若有博友能够在babel.config.js中配置好prismjs插件并正常使用，还请联系告知：dongshou2321@foxmail.com