在《为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 WordPressAuto 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条留言

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

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

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

    1. 多谢告知。

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

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

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

      根据自己的需要选择就行

评论功能已关闭