Vue使用百度富文本编辑器ueditor配合highlight.js实现代码高亮显示

使用过百度富文本编辑器的同学，应该知道用原有的"代码语言"功能写出来的代码显示毫无高亮显示，让人毫无看下去的欲望，就像下面这样。

所以我决定使用highlight.js来美化一下，让代码高亮显示。

首先下载安装highlight.js。

cnpm install highlight.js --save

导入js和css，这里css的样式可以自己去百度找，选择自己喜欢的一款引入。

import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/atom-one-dark.css'  //导入代码高亮样式

由于百度富文本编辑器的代码是用<pre>标签包裹，而highlight.js是通过<pre><code>标签和类名进行渲染的，所以我们需要在提交的时候处理一下，把<pre>标签替换成我们想要的<pre><code>形式，通过下面的代码实现，this.msg是富文本编辑器里面的内容。

hlCode(){
    //替换pre标签，前端高亮显示    
    let content=this.msg;    
    let c=document.createElement('div');    
    c.innerHTML=content;
    for(let i=0;i<c.getElementsByTagName('pre').length;i++)
    {
        let con=c.getElementsByTagName('pre')[i].innerHTML;
        c.getElementsByTagName('pre')[i].innerHTML='<code class="hljs ini">'+con+'</code>';
        hljs.highlightBlock(c.getElementsByTagName('pre')[i]);  //使用插件高亮你的代码块    
    }    
    content=c.innerHTML;    
    this.msg = content;
    return content;
}

之后就可以将返回的content进行持久化处理了，比如放到数据库里做持久化处理。

这个时候我们只是处理了发布时候的标签替换，需要在前端显示的地方同时也下载安装highlight.js和导入css。

cnpm install highlight.js --save

import 'highlight.js/styles/atom-one-dark.css'

大功告成，最后来张效果图：