CKeditor与syntaxhighlight打造joomla代码高亮

（效果如图所示！）

最近在技术社区和代码论坛里逛的时候，发现不少站点都内置了非常漂亮的语法高亮功能。无论是写技术文章还是贴代码，视觉效果都相当专业。自己用Joomla搭了个小站，偶尔也会贴些代码片段，没有语法高亮总觉得少了点什么。于是昨晚折腾了一番，总算把这个问题搞定了，记录一下过程。

Joomla默认的编辑器是TinyMCE，跟某些博客平台的后台一样，但可惜它本身不带语法高亮。网上搜了一圈，发现有个Joomlagate出的插件，不过那玩意儿需要赞助会员才能下载，暂时没辙。也试过用TinyMCE配合SyntaxHighlighter自己搞，但TinyMCE的配置文件和插件机制不太熟悉，折腾半天没成功。

于是转向另一个常用的开源编辑器——CKEditor（FCKeditor的升级版，这个应该不用多介绍）。废话不多说，直接进入正题。

环境说明：Joomla版本为1.5.9。需要下载Joomla版的CKEditor以及SyntaxHighlighter插件（文末会提供打包下载，当然也可以去官网拿最新版）。

安装好CKEditor插件后，在根目录 plugins/editors/ckeditor/plugins/ 下，把解压后的SyntaxHighlighter文件夹上传进去。这个目录下都是CKEditor的插件，对照一下就知道该放什么了，基本没什么难度。

下一步，要在CKEditor的工具栏上加上“代码”按钮（就是下图中的最后一个）。

这一步需要修改CKEditor的配置文件。常规思路是改 config.js，但Joomla版的CKEditor比较特殊——改这个文件没用，得直接改 ckeditor.js。打开一看，代码密密麻麻，别慌，只需要改两处即可。

第一处：在 plugins 列表里加上 syntaxhighlight。找到类似下面这段代码（建议用Dreamwea ver打开，搜索定位快一些）：

',fullPage:false,height:200,plugins:'about,basicstyles,blockquote,button,clipboard,colorbutton,contextmenu,elementspath,enterkey,entities,filebrowser,find,flash,font,format,forms,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,maximize,newpage,pagebreak,pastefromword,pastetext,popup,preview,print,removeformat,resize,sa ve,scayt,smiley,showblocks,sourcearea,stylescombo,table,tabletools,specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc,syntaxhighlight',extraPlugins:'',removePlugins:'',protectedSource:[],tabIndex:0,theme:'default',skin:'kama',width:'',baseFloatZIndex:10000

第二处：在工具栏配置数组里加上 syntaxhighlight 按钮。找到 i.toolbar_Full 的定义，在最后一项 'About' 后面加上 'syntaxhighlight'，像这样：

i.toolbar_Full=[['Source','-','Sa ve','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About','syntaxhighlight']]

两处修改完成后，回到后台发布文章，就能看到工具栏上多了一个“代码”按钮，跟第一张截图一样。点击它就可以插入语法高亮的代码块了。

最后一步，还需要在前台加入对应的JS和CSS样式，才能让高亮效果真正显示出来。这需要修改模板文件里的HTML头部。

使用Joomla自带模板“ja_purity”为例，打开模板的 index.php，在 部分加入以下代码（注意放在 JHTML::_('beha vior.mootools'); 之后）：

这里只加了常用的几种语言脚本（PHP、C#、XML、JS、SQL等），用不到的就没加，以免影响页面加载速度。

至此，全部配置完成，发篇文章测试一下效果吧。整个方案参考了网上不少资料，附件也是别人打包好的，一并分享出来：CKEditor3.x-SyntaxHighlight.rar。