最近笔者运用Thinkphp框架开发了一个博客系统,就叫它WBlog吧,当然目前流行的博客系统有很多,如wordpress,z-blog等,但我觉得wordpress似乎太笨重了,z-blog又是asp脚本的,本人对asp不是很了解,找不到称心如意的,那就干脆自己开发吧!
考虑到以后写代码方面的博文比较多,为了看起来优雅,代码高亮显示功能是必须的。网上流行的编辑器比较多,但自身带有代码高亮显示功能的却很少,最后找到百度在线编辑器ueditor。ueditor的代码高亮显示功能确实很好,插件包却相当地大,解压后10多M!我博客的编辑器用的是kindeditor,经过我整理不过几百KB,整个博客的文件才不到3M,如果改换ueditor,要带上这么笨重的包袱,运行起来肯定也不爽。我研究了一下ueditor,发现它的代码高亮显示功能原来是整合了syntaxhighlighter插件,于是我就有了kindeditor整合syntaxhighlighter的想法,百度一下,网上关于kindeditor整合syntaxhighlighter还真不少,众说纷纷,但却局限于某个版本,或者连版本也不给出,我乱了。没办法,只好自己摸索了。
为什么syntaxhighlighter可以使代码高亮显示?
带着这个问题到http://alexgorbatchev.com/SyntaxHighlighter/download/去下载一个SyntaxHighlighter2.1.364插件包,那里有许多版本的,低版本的解压后有一个实例文件test.html,用浏览器打开显示的是一个代码高亮显示的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
显然被着色的代码是放在
1 |
|
1 |
|
说明:上面语法的红色部分就是插入SyntaxHighlighter的样式,例如插入PHP语言,那么就是
1 |
|
关注细节:
如果插入的是
1 |
|
到这里,我明白了syntaxhighlighter使代码高亮显示的原因。
接下来打开kindeditor-4.1.1\plugins\code\code.js文件,找到下面的代码片断:
1 2 3 4 5 |
|
1 |
|
1 |
|
1 2 3 4 5 |
|
这样做的意义是,在kindeditor编辑器插入代码时,插入了样式 class="brush:' + cls + '">,而这个样式的作用就是负责代码着色的,代码中的cls变量是在编辑器插入的被着色的语言名称。
使用方法
在需要显示代码高亮显示的模板前面加载如下文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
那么多文件,大家看起来肯定很晕吧!我也觉得晕。不过我们可以根据需求来简化,比如我选用的语言是PHP,那么我导入文件,像shBrushVb.js对应VB语言,shBrushJava.js对应JAVA语言等等,这些我用不上的,那我就省去了,然后再把要用到的js文件全部合并放到shCore.js中,两个css文件合并到shCore.css中,现在只需导入两个文件了,这下看起来没那么晕了吧?导入的文件是少了,但我建议不要图简便而把这些文件放在一些公共文件如head.html,这样会使那些没有必要引入head.html文件的页面影响打开速度,而是把那些文件导入需要代码着色的页面。
值得注意的是,在整合中导入文件的路径要正确,我把整合的插件用在thinkphp开发的WBlog博客系统中,在调试过程中即使方法没有错,会出现各种种样的错误,原因在于更改了文件没有删除缓存,如果再有错误,重启一下系统。
上效果截图
经验总结:kindeditor整合SyntaxHighlighter其原理就是:kindeditor插入代码的同时嵌入SyntaxHighlighter的代码着色样式,然后在前台加载SyntaxHighlighter的相关文件使代码高亮显示。明白了这个原理后,不管kindeditor和SyntaxHighlighter是什么版本的整合或者其它在线编辑器和SyntaxHighlighter整合方法其实都是大同小异。