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

博客后台采用的是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已经把换行符自动替换掉了,因此只需要在文章页面中加入如下代码:

1
2
3
4
5
6
7
<script type="text/javascript">
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>

修改UEditor配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
// ... 省略
}
},
// ... 省略
};

完成整合

最后引入在文章页面引入highlight.pack.js以及相应风格对应的css文件,如果采用的是ueditor.all.min.js,别忘了重新压缩js文件。

总得来说还是非常简便的。

CATIA Geometric Modeler简介
Java 8 time API