在搭建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插件做法

  1. 将WP-Syntax-Button插件包含的源码复制到google-syntax-highlighter。
  2. 将wp-syntax-button.php内容COPY到google_syntax_highlighter.php中并更改editor_plugin.js路径。
  3. 修改window.php文件,将WP-Syntax语言列表换成GSH所支持语言。
  4. 最后更改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目录下,到后台做个激活即可。

参考资料

  1. TinyMCE Advanced
  2. Google Syntax Highlighter for WordPress
  3. 10个Wordpress增强型编辑器
  4. 关于WordPress高亮代码插件的比较