在搭建WordPress时,考虑到会发布一些代码,选择编辑器和代码高亮是我这次搭建的主要部分。最受大家青睐TinyMCE Advanced+WP-Syntax组合,这两个插件做得非常棒,特别是WP-Syntax它还包含一个叫WP-Syntax-Button插件,将WP-Syntax用可视化按钮形式集成到编辑器。而最后为什么我放弃WP-Syntax主要原因是他基于服务端,很明了她将会产生非常多的垃圾代码。
最终我使用TinyMCE Advanced+Google Syntax Highlighter for WordPress(简称:GSH),她非常可爱在支持语言相对于WP-Syntax少得多,但是相信已经足够你用了,并且他是基于客户端。唯一不足的是就没有一个GSH Button直接集成到编辑器中。说真的如果你看到这篇文章那么你有福了,我已经将Button直接集成到GSH当中。
一、GSH直接集成类似WP-Syntax-Button插件做法
- 将WP-Syntax-Button插件包含的源码复制到google-syntax-highlighter。
- 将wp-syntax-button.php内容COPY到google_syntax_highlighter.php中并更改editor_plugin.js路径。
- 修改window.php文件,将WP-Syntax语言列表换成GSH所支持语言。
- 最后更改tinymce.js文件中的一句话:
tagtext = '<pre class="' + langname + '" title="code" ';
PS:观察细心的朋友会发现,我将GSH规定的name改成title,这是为什么呢?
二、让一切完全可视化
不管是WP-Syntax-Button还是Google Syntax Highlighter for WordPress当从可视化切换到HTML再切换回来,那么就无法正常显示高亮代码,主要原因是编辑器自动过滤:name等属性,其实还只是我个人猜测,但应该没有错,我没有去考证。
所以就出现我将name属性改成title,这样就确保不管我在可视化和HTML之间如何切换都能正常高亮代码。
三、把shBrush***.js文件合成一个
做优化的朋友都知道将多个文件合并为了减HTTP请求,所以在这次修改的时候我尝试把所有跟高亮代码语言脚本合成一个,在我使用过程中并没有发现问题。
四、下载
这里提供本站的google-syntax-highlighter插件包,不想去更改的同学直接使用,直接上传到plugins目录下,到后台做个激活即可。
参考资料

太谢谢你了,帮我们这些小菜做好现成的,不用到处找了
呵呵。不客气,举手之劳而已。
LZ 问个问题:
1. 为什么在Visual编辑模式下 没有发现用于”插入代码”的按钮呢?代码 必须在HTML编辑模式插入么?
2. 1.TinyMCE Advanced 似乎没什么效果? 不解
我的注意:默认
1、WP-Syntax-Button插件安装后才能在编辑器看到“Code”字样,使用办法就 ,选择你要高亮的代码,然后再点击”Code“按钮……
2、TinyMCE Advanced没有效果,你要先确定你是不是启用该插件。或者你卸载该插件再安装,试试。
合并js没有必要,因为syntax-highlighter有选择性加载JS刷子的功能。
这款最好用的就整合了按钮和js选择性加载:Syntax Highlighter Optimized 近乎完美的wp代码语法高亮插件
tulongzhiji.com/blog/syntax-highlighter-optimized/