WP笔记

为CKEditor For WordPress插件增加代码高亮功能

最后更新于 2012 年 9 月 10 日

通常，我会安装CKEditor For WordPress插件替换掉WordPress的默认编辑器，别的都还好，唯一令我不满的就是对代码高亮功能的支持。搜syntaxhighlighter插件很多，但都是针对默认编辑器TinyMCE的，换成CKEditor，只能悲催的自己输入那些本该一键插入的代码，如果有一个完美支持CKEditor for WordPress Syntaxhighlighter的方法该多好。

更新：这篇文章介绍的方法已经可以用插件实现，请看SyntaxHighlighter CKEditor Button Plugin – 为WordPress CKEditor增加代码高亮功能。

相关文章

《如何禁用wpautop》 – 用ckeditor输入定制化的html代码时，wpautop可能会为其添加多余的<br />标签

What's wrong with WP Codebox

我一直用WP CodeBox+CKEditor实现代码高亮功能，但有些问题终于让我忍无可忍。

  • 必须手动写<pre lang="xx">标签，麻烦
  • 必须让CKEditor保护<pre>标签包围的内容，不能将这些内容转码，即使如此，&符号还是悲催的被转码了
  • 当使用编辑器编辑紧邻<pre>标签的内容时，加粗改颜色等操作不但不生效，还会产生一大堆无用的<span>标签
  • 代码高亮需要的js和css文件会在所有页面引入，即使这个页面没有代码
  • 最悲剧的就是当代码中出现<pre>标签时，这个东东彻底崩溃了

基于以上理由，终于决定弃用WP Codebox。

基于CKEditor Syntaxhighlighter + Auto SyntaxHighlighter的代码高亮功能

首先下载提到的两个插件

CKEditor Syntaxhighlighter >>，此插件是CKEditor的插件，不是WordPress的

Auto SyntaxHighlighter >>，一款精简实用的插件，安装此插件，就可以将SyntaxHighlighter脚本集成到WordPress中，并且只在有代码的页面引入js和css文件。

之后，修改一下CKEditor中队pre标签定义的样式，针对CKEditor的Syntaxhighlighter功能就okay了，下面先放效果图

1. 安装配置好后，CKEditor中会出现一个Code按钮。

add-code-button

2. 点击此按钮，弹出一个输入代码的提示框，输入代码，选好语言即可

输入代码

3. 点击OK按钮，代码插入文章，并且会与其它内容区分开。

代码块

4. 代码在发布文章中的效果

In action

这样就比用WP Codebox的舒服多了，也不会把&符号转码，总之WP Codebox一切的缺点这个都不存在。

如果有兴趣知道如何实现的，继续读。

如何安装CKEditor Syntaxhighlighter插件

如果你下载了这个插件，打开压缩包，可以看到里面有个plugin目录，将下面的syntaxhighlighter文件夹拷贝到一个你希望存放的路径，例如uploads文件夹，或者plugin根目录，或者主题目录下。

这个是给CKEditor用的插件，按理说应该放在CKEditor的plugin下，但我们知道升级CKEditor For WordPress插件时，所以自定义的东西都会消失，所以能不放在CKEditor For WordPress插件目录下的就拿出来。我选择放在/wp-content/uploads/ckeditor/下。

打开wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js文件，添加如下代码

config.extraPlugins = 'syntaxhighlight';
config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );
CKEDITOR.plugins.addExternal('syntaxhighlight', 'http://www.yourdomain.com/wp-content/uploads/ckeditor/syntaxhighlight/');
//向编辑器添加按钮
config.toolbar_WordpressFull.push(['Code']);
config.toolbar_WordpressBasic.push(['Code']);

注意将CKEDITOR.plugins.addExternal中的http://www.yourdomain.com替换成自己的域名，这里直接硬编码了，这个ckeditor.styles.js更新的时候是铁定要被覆盖的，所以硬编码似乎更方便些。

这样访问CKEditor就可以看到那个红色的Code按钮了，如果出现CKEditor无法加载的情况，有两种可能

  • 设置的路径不对，自己检查一下
  • 需要手动清除浏览器的缓存文件，或者用Firebug工具条禁用缓存后再试

如果你不继续安装Auto SyntaxHighlighter插件，也是可以用的，只是代码会以<pre>标签的形式展示，没有任何高亮效果。

安装Auto SyntaxHighlighter

这个不用说了，去后台搜索该插件安装即可

到这里，代码高亮功能就可以用了，如果你不在乎编辑文章时代码块和其它部分区分不开的话。

配置CKEditor，写入自定义样式

如果你想代码块和其它部分有明显的分别，就像实例展示中看到的一样，那就继续下面的步骤。

打开CKEditor的高级选项（Advanced Settings），将第一项和第二项如下图所示设置

Ckeditor高级选项

Editor CSS设置为Define css，就允许我们用外部样式表定义编辑器里的文字样式。%t代表当前主题的目录

所以，在当前主题根目录下创建一个ckeditor.css文件，写如下样式

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

body
{
	/* Font */
	font-family: Arial, Verdana, sans-serif;
	font-size: 14px;

	/* Text color */
	color: #000;

	/* Remove the background color to make it transparent */
	background-color: #fff;
}

ol,ul,dl
{
	/* IE7: reset rtl list margin. (#7334) */
	*margin-right:0px;
	/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
    padding:0 40px;
}
pre {
	border:1px dashed #CCC;
	padding:10px;
	background:#FFFFCC;
	width:90%;
}

前面的样式都是plugins/ckeditor-for-wordpress/ckeditor/contents.css中的内容（注意我把body中的字号放大了，原来是12px），只有pre的样式是自己加的，可以按照自己的喜好来定制。

这样就大功告成了，刷新浏览器缓存，就能看到一个用着方便、看着舒心的CKEditor Syntaxhighlighter。

What's behind

光芒的背后总有一位低调或者被低调的英雄，今天的英雄就是一个叫做syntaxhighlighter的脚本

http://alexgorbatchev.com/SyntaxHighlighter/

这个脚本基于js，是完全独立的，并且要求<pre>标签中的特殊符号（例如引号，大于小于号和&符号）必须被转换成安全编码，这样就不存在&符号出错的问题了。

原理也很简单

1. 在文章中写入该脚本规定的标签格式，例如

<pre class="brush:php;">
 你的代码
</pre>

注意看pre标签上的class="brush:php"，brush在英文中是画笔的意思。也就是说class告诉脚本用什么画笔渲染pre标签的内容。所以，就有了下面的事。

2. 引入核心文件（shCore.js and shCore.css）

3. 引入画笔脚本（例如渲染php需要引入shBrushPhp.js，查看所有画笔）

4. 调用初始化代码启动渲染

SyntaxHighlighter.all()

这就是该脚本的工作过程，于是我们会发现一个问题，画笔文件相当多，如果你不确定页面会出现哪些语言而将所有画笔js文件引入，一定会拖慢网页加载速度，浪费流量。这也是选择Auto SyntaxHighlighter的原因，该插件用正则表达式匹配文章内容中是否有需要渲染的语言，有的话引入相应脚本，不会全部引入，不会在不需要的时候引入。

当然Auto SyntaxHighlighter 提供的功能很少，或者说这个插件基本上就是用来引入SyntaxHighlighter脚本的，如果想有更多的功能，或者换一个支持SyntaxHighlighter 的插件，或者自己修改一下插件，定制化只需要几段js代码

关于如何配置SyntaxHighlighter，参考SyntaxHighlighter Configuration

1条评论

  1. Pingback： SyntaxHighlighter CKEditor Button Plugin – 为WordPress CKEditor增加代码高亮功能 | ~SolagirL~

评论已关闭。