在VUE项目中配合ueditor用highlight.js实现代码高亮

环境

VUE，NPM

需求

在ueditor编辑器里面加入代码语言后，页面生成的文章自动高亮起来。

目的

增加文章的可读性，以及让页面变得丰富多彩。

选择

我这里放弃了百度ueditor自带的高亮，因为确实不太好看，不符合我的审美，于是我这里用到的是highlight.js，这是一个提供自动识别代码块的高亮插件，并且它的库很多风格，可以根据自己的喜爱来配置。

准备

ueditor编辑器

配置

首先我们在自己的后台安装highlight,js.插件

npm install highlight.js --save

安装好后在需要使用高亮的页面，也就是ueditor编辑器页面中，先引入代码

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

这里我用的风格是atom-one-dark风格（ 对应atom-one-dark.css样式表 ），想要其他风格的去官网找需求。

然后就可以使用了。根据highlight官网给的对应的规则是自动识别<pre><code> </code></pre>标签中的代码进行高亮，而在ueditor有个代码语言的功能，这个功能使用后发现这个编辑器标记的代码块标签是<pre></pre>，所以下面的逻辑代码出现了。

let content=UE.getEditor('edit').getContent();
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;
//content就是已经所以高亮了代码块的整个文章

上面代码是把每一个<pre></pre>标签都转换成了<pre><code> </code></pre>，然后再让highlight.js来进行渲染。

后续操作就是把content上传到数据库或者其他地方可以让前台获取就行了。

上面几步做了后，还没完，还需要在展示页面添加相对应的高亮库 （ 因为highlight是通过class类名来进行高亮 ）。

我们先一样在前台安装highlight插件

npm install highlight.js --save

然后在前台展示的页面里加入css库

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

打开项目写篇文章试一试，看看效果

如果看到是本篇文章代码块显示的样式，那么代表成功了！

结语

比较推荐在相对应的css库里加入自己的css样式，比如我对于hljs类加入了 border-radius:5px; 让代码块变成圆角更美观。