WP笔记

SyntaxHighlighter CKEditor Button Plugin – 为WordPress CKEditor增加代码高亮功能

最后更新于 2012 年 12 月 20 日

在《为CKEditor For WordPress插件增加代码高亮功能》一文中介绍了一种让WordPress CKEditor支持代码高亮的方法——即CKEditor For WordPress + Auto SyntaxHighlighter + CKEditor Syntaxhighlighter的模式，但这种方法有一个很大的弊端，就是我们需要手动修改CKEditor For WordPress插件中的ckeditor.config.js文件，当插件升级时，还要手动备份这个文件，升级后还原，很不方便。

Please note that if you have upgraded to CKEditor For WordPress 4.0, please update this plugin to the latest version and make sure to clean your browser's cache( Ctrl+Shift+Delete)

于是，将上面的方法写成了一个WordPress插件——SyntaxHighlighter CKEditor Button

使用方法

  1. 分别安装CKEditor For WordPress和Auto SyntaxHighlighter两个插件
  2. 安装SyntaxHighlighter CKEditor Button插件
  3. 启用这三个插件，即可以实现CKEditor的代码高亮显示。

如果希望编辑器中的代码有特殊样式便于识别，还要手动设置一下CKEditor，步骤如下

  1. 访问CKEditor->高级选项(Advanced Settings)，找到第一项CSS Options
  2. Editor CSS设置为Define css
  3. CSS Path设置为

    http://yourdomain.com/wp-content/plugins/syntaxhighlighter-ckeditor-button/ckeditor.css

    其中yourdomain.com替换成WordPress的真实安装地址

  4. 如果wp-config.php中修改了content目录的地址，例如:
    define('WP_CONTENT_URL', 'http://my-cdn.me');

    则CSS Path应设置为

    http://my-cdn.me/plugins/syntaxhighlighter-ckeditor-button/ckeditor.css

  5. 也可以选择将ckeditor.css拷贝到当前主题的根目录中，这样CSS Path可设置为

    %t/ckeditor.css

    设置CKEditor，增加编辑器样式

效果展示

启用插件后，编辑器中会增加一个Code按钮 启用插件后，编辑器中会增加一个Code按钮

点击Code按钮，出现输入代码的对话框，可以选择多种语言 点击Code按钮，出现输入代码的对话框，可以选择多种语言

开启Auto SyntaxHighlighter插件，插入一段php代码的样式 开启Auto SyntaxHighlighter插件，插入一段php代码的样式

不开启Auto SyntaxHighlighter插件时，前台显示效果 也可以不安装Auto SyntaxHighlighter插件，则前台代码仅显示Pre标签的效果。

设置ckeditor.css后pre标签在编辑器中会有特殊样式 如果设置了ckeditor.css，则代码在编辑器中可以用特殊样式显示

插件下载

下载地址：http://wordpress.org/extend/plugins/syntaxhighlighter-ckeditor-button/

8条评论

  2. Pingback： SyntaxHighlighter CKEditor Button Plugin – 为WordPress CKEditor增加代码高亮功能 – Caesar-世界从这儿开始

  3. 站长您好，我使用的是WordPress自带的tinymce编辑器，在后台发布文章编辑器上有一个代码插入按钮，我在前台评论框调用了tinymce编辑器，但是没有代码插入按钮，请问如何让这个Auto SyntaxHighlighter插件代码插入按钮也可以在前台使用呢？谢谢！

    1. 这个按钮属于tinymce的插件，写进wordpress时是通过wp的filter加的，这个filter只对后台有效，所以前台调用里没有那按钮（记得是这样，也可能略有出入），你可以参考tinymce如何加载第三方插件的方法，就是js渲染textarea，不一定非要用wp_editor调用。

      1. 您好，感谢热心帮助。问题已经解决了！插件里有一个权限判断，去掉即可。

  4. Pingback： 新年新气象 - HDQ's Blog

    1. 多谢告知。

      你说的没错，只要是可以引入Alex Gorbatchev 的SyntaxHighlighter脚本的wp插件，都可以用。我选Auto SyntaxHighlighter的原因是：

      1. 简单，没有后台设定，没多余功能

      2. 这个插件会先检测内容中有没有<pre>标签，有的话才引入syntaxhighlighter的js和css文件，而wp syntaxhighlighter会在所有post页面引入这些文件，无论是否需要。不过条件化引入的缺点就是不能渲染评论中的<pre>标签。

      根据自己的需要选择就行

评论已关闭。