Nuxt配合Prism实现前端代码高亮显示

昨天写了一篇Vue使用百度富文本编辑器ueditor配合highlight.js实现代码高亮显示，经过测试感觉并没有想象中的好用，主要原因在于百度富文本编辑器并没有<code>标签，这样的话我们需要修改dom结构，然后保存数据库，这样的话，我们在修改的时候，把文本重新放入百度富文本编辑器中，就会出现格式错乱，或者不换行的bug，强迫症看了是真的很不舒服。

对此我想了很多的解决办法，换个思路，之前我们是修改了dom，插入了<code>标签然后保存到数据库，现在我们可不可以在数据库里面不修改，等到数据拿出来的时候在前端渲染？

想着反正是个大修改，不如顺便也换个高亮插件吧，所以放弃了highlight.js，选择了prism。

Prism下载：https://prismjs.com/download.html

prism用起来也比较的方便，只需要下载一个js和css导入就可以使用了，而且支持的语言多，功能也很齐全，最主要的是高亮样式也好看。

首先导入js和css。

import "../../static/css/prism.css";

script:[
    { src:'/js/prism.js'},
]

因为我这里用的是Nuxt，是服务端渲染，所以在渲染的时候在服务器端没有document和window这些dom对象，需要等页面加载完之后，再把数据拿出来渲染，也就是在mounted()方法中调用。

hlCode(msg){
    //替换pre标签，前端高亮显示
    let content=msg;
    let c=document.createElement('div');
    c.innerHTML=content;
    for(let i=0;i<c.getElementsByTagName('pre').length;i++)
    {
        // c.getElementsByTagName('pre')[i].setAttribute("class", "language-java");
        let con=c.getElementsByTagName('pre')[i].innerHTML;
        c.getElementsByTagName('pre')[i].innerHTML='<code class = "language-java">'+con+'</code>';

    }
    content=c.innerHTML;
    this.articleData.html_context = content;
    return content;
},

mounted(){
    //前端渲染，代码高亮插件
    this.hlCode(this.articleData.html_context);
},

这样就好啦， 修改的时候格式也不会乱掉了，因为本来数据库里面的东西我们也没有修改嘛。

最后上效果图。