最近笔者运用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，用浏览器打开显示的是一个代码高亮显示的例子:
syntaxhighlighter build test page syntaxhihglighter test this is a test file to insure that everything is working well.
function test() : string { return 10; }
显然被着色的代码是放在
之间的，其原理是给代码加上一个样式class=brush: c-sharp;,把语法提出来就是：
被着色的代码
说明：上面语法的红色部分就是插入syntaxhighlighter的样式，例如插入php语言，那么就是php代码
,其它的类似。
关注细节：
如果插入的是php代码
就是多了toolbar:false;，这时代码同样是高亮显示，但是把光标移到代码时没有弹出复制功能，大家不要小视这个功能，没有它你选取代码后复制，会带上许多序号，你要运行这些代码先得把这些序号去除，很费时。要解决这个问题，只要把toolbar:false;去掉即可，其方法下面会提到。
到这里，我明白了syntaxhighlighter使代码高亮显示的原因。
接下来打开kindeditor-4.1.1\plugins\code\code.js文件，找到下面的代码片断:
click : function(e) { var type = k('.ke-code-type', dialog.div).val(), code = textarea.val(), cls = type === '' ? '' : ' lang-' + type, html = '\n' + k.escape(code) + '
'; self.inserthtml(html).hidedialog().focus(); } }\n' + k.escape(code) + '
的作用就是把被着色的代码放在
之间。
结合syntaxhighlighter代码着色的办法把上面的代码片断改成:
click : function(e) { var type = k('.ke-code-type', dialog.div).val(), code = textarea.val(), cls = type === '' ? '' : type, html = '\n' + k.escape(code) + '
'; self.inserthtml(html).hidedialog().focus(); } }这样做的意义是，在kindeditor编辑器插入代码时，插入了样式 class=brush:' + cls + '>，而这个样式的作用就是负责代码着色的，代码中的cls变量是在编辑器插入的被着色的语言名称。
使用方法
在需要显示代码高亮显示的模板前面加载如下文件:

那么多文件，大家看起来肯定很晕吧！我也觉得晕。不过我们可以根据需求来简化，比如我选用的语言是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整合方法其实都是大同小异。