给 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

相关评论

  1. 天晴说道:

    你好,我也是照着修改.js文件,结果也把后台那些按钮都弄没了。后来又尝试换回来,也换了很多次,把我能找到的.js文件都换上过,但是依旧没用~TAT
    请问你最后是怎么解决按钮都没了那个问题的呢?谢了!

  2. […] 折腾这个wp-codebox是花费了不少功夫啊,唉,想添加个便捷按钮,在网络上找的资料,乱七八糟的,没一个能用了. 最后还是要感谢 forece […]

  3. 雨云说道:

    我没有用富文本编辑器。

  4. 囧啊囧说道:

    不会用,我添加的一个新的编辑器。

  5. 阿修说道:

    我都是手动添加的……大杯具啊

  6. 万戈说道:

    WP自带的编辑器确实有点菜

    • FORECE说道:

      我到现在才感觉到,简单就是美啊。用HTML代码好爽好简洁啊。看着太舒服了,发现我对代码有洁癖。

相关评论:

您的电子邮箱地址不会被公开。 必填项已用*标注