WordPress 编辑器和代码高亮

在搭建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高亮代码插件的比较

10 Comments

  1. 太谢谢你了,帮我们这些小菜做好现成的,不用到处找了

  2. LZ 问个问题:
    1. 为什么在Visual编辑模式下 没有发现用于”插入代码”的按钮呢?代码 必须在HTML编辑模式插入么?
    2. 1.TinyMCE Advanced 似乎没什么效果? 不解

    我的注意:默认

    • asdf

      2010年9月10日 at 17:13

      1、WP-Syntax-Button插件安装后才能在编辑器看到“Code”字样,使用办法就 ,选择你要高亮的代码,然后再点击”Code“按钮……
      2、TinyMCE Advanced没有效果,你要先确定你是不是启用该插件。或者你卸载该插件再安装,试试。

  3. 合并js没有必要,因为syntax-highlighter有选择性加载JS刷子的功能。

    这款最好用的就整合了按钮和js选择性加载:Syntax Highlighter Optimized 近乎完美的wp代码语法高亮插件

    tulongzhiji.com/blog/syntax-highlighter-optimized/

  4. 感谢分享,我是直接拿博主的附件用的,呵呵。
    发现 Google Syntax Highlighter for WordPress 不支持 objective-c的语法高亮,所以我修改了一下,评论中内容有限,参考这里:
    http://icfly.cn/archives/2012/09/15/add-objective-c-syntax-highlighter.html
    希望能帮到需要的人。
    最后再次感谢博主的无私奉献,嘿嘿。

  5. 使用了你的代码,表示感谢

  6. 貌似现在的下载链接 下载不了了 管理员能在弄个下载链接么

    • asdf

      2013年2月3日 at 17:09

      我测试是可行的,但我最后还是把链接转化成我空间里面,理应不再会出现该问题。

    • 我测试是可行的,但我最后还是把链接转化成我空间里面,理应不再会出现该问题。

Comments are closed.

© 2017 卡片机色彩 沪ICP备13032872号-3

Theme by cipchk

to top