UEditor结合highlight.js

本文的内容应用在本博客原来的页面上。作为技术博客来说少不了贴代码的内容，因此需要一个较为美观的代码展示。为了搞这个玩具博客我总是需要弄一些前端的一些内容，让我很头疼，不过这也是没办法的事，博客后端逻辑是简单了些，基本完成后可修改的地方比较少，大量的还是处理前端的琐碎内容。

博客后台采用的是UEditor富文本编辑器用来编写文章，百度查询UEditor代码高亮的结果基本上是与SyntaxHighlighter或者Prism来整合，前者好像是有作为UEditor的第三方插件，原生编辑的内容确实也与之比较相符，但是下载不太友好；后者在下载的时候遇到了问题，官网非常的卡，不知是浏览器的问题还是网站本身有毛病。最后两者都没有选，而是选用了highlight.js，风格不错，可选的主题也不少，可以定制下载，只包含一个js文件和一个css文件就可以使用。

下面开始介绍整合过程。目的是为了前台页面能够展现较为美观的代码展现，但是在编辑文章的时候并不需要，大部分代码高亮工具都是在页面加载时更改内容，highlight.js也不例外。

定制下载

进入官网https://highlightjs.org，点击Get Vesion …，进入语言勾选页面，勾选需要的语言后点击download即可下载包含js和css文件的压缩包。同时可以看到highlight可以用node.js来构建，也可以用npm来获取，不过图个省事还是直接下载。

配置Highlight

首先highlight.js默认搜索代码的格式是：<pre><code>具体代码</code></pre>，code标签上可以有以语言名称作为类名（例如class=”java”）来指定代码类型，highlight也会自己判断类型。而UEditor默认生成的代码格式类似<pre class="brush:java;toolbar:false">具体代码</pre>。

要解决这种不匹配的情况首先是要修改生成的类名，查看下载得到的highlight.pack.js里面的registerLanguage方法，不难看出这就是支持的类名。然后查看UEditor的配置文件ueditor.all.js，大约在13100行左右可以看到插入代码的设置，对比UEditor的UI如下图所示：

显然配置的键值对是 ‘实际语言类型’ : ‘UI中显示的类型名’，因此根据支持的类名以及实际需要进行修改即可。完成了类名的修改之后就要解决html标签格式的问题，网上有方案在前台页面上写一段js给<pre>标签循环嵌入<code>或者修改UEditor对于嵌入代码的逻辑。但是对于当前版本的highlight（9.12.0）解决这个问题不需要这么费周折，查看下载下来的文件内的README说明文档：

br换行问题我并没有遇到，UEditor已经把换行符自动替换掉了，因此只需要在文章页面中加入如下代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('pre').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
</script>

修改UEditor配置

最后只剩下修改类名的格式，回到ueditor.all.js，在刚才修改处的下方就是代码插入逻辑，很容易看到’brush’相关字眼，主要有两处，修改如下：

me.commands['insertcode'] = {
    execCommand : function(cmd,lang){
        // ... 省略
        if(pre){
            pre.className = lang; /*'brush:'+lang+';toolbar:false;';*/
        }else{
            // ... 省略
            me.execCommand('inserthtml','<pre id="coder" class="'+lang+'">'+code+'</pre>',true);
            // ... 省略
        }
    },
    // ... 省略
};