给 WordPress 的 HTML 编辑界面中添加 SyntaxHighlighter 按钮

刚刚使用了 SyntaxHighlighter Evolved 插件,不过每次输入代码都要打一堆code来开启这个功能,能不能在后台的HTML编辑器中加上方便快捷的按钮呢?找了半天,大部分都是介绍如何给 WP-SYNTAX 加按钮的,我自己照猫画虎在quicktags.js里弄了半天,一直不得其解,把后台按钮都弄没了。不过皇天不负有心人,终于在飞鱼博客中找到了解决方法。

SyntaxHighlighter是一款WordPress的高亮代码的插件,是我认为的唯一一款无需改动原程序代码就能完整显示代码的插件。不过它和其它代码插件一样,都需要手动添加识别代码。所以有必要在编辑界面中添加一个SyntaxHighlighter按钮。

方法是修改/wp-includes/js/quicktags.js文件。
找到

1
edButtons[edButtons.length]=new edButton("ed_code","code","<code>","</code>","c");

在其后添加

1
edButtons[edButtons.length]=new edButton("ed_shle","[code]","[code lang='php' firstline='1' gutter='0' highlight='1']","[/code]","c");

保存后,在HTML编辑界面就会多出个SyntaxHighlighter按钮了。至于其他按钮大家可以自行修改代码来添加。

这个按钮所产生的识别代码是带了3个参数的:
firstline表示显示起始行号;
gutter表示是否显示行号;
highlight表示第几行为高亮显示。
更多的参数可以去参考插件后台中的说明部分。

添加完的效果如下



刚发现 SyntaxHighlighter 的另一大优点,那就是支持多种标签,可以用【php】这种形式,还可以用【code lang="php"】这种形式。甚至还可以用【sourcecode language="php"】这种形式。这样做的好处就是避免了代码运行。就拿这篇文章来说,我贴了半天,老发现引用中的code会自动运行。因为里边的【code lang='js'】和外边的冲突了,结果造成了显示失败。如果换成【js】来显示,那么就完全没有任何问题了。

另外冰剑推荐的 WP-SYNTAX 插件虽然也是可以高亮显示插件,不过不能自动换行。虽然可以在CSS中修改,不过我对CSS极其头疼。所以偷懒就偷懒吧。

另外附上WP-SYNTAX修改添加Quicktags按钮的方法。还是飞鱼博客的。
http://blog.e-520.com.cn/archives/296.html

另外如果懒人就直接下载小木木同学做成的quicktags.js,直接上传替换即可
http://immmmm.com/wordpress-plugins-wp-syntax.html