WP笔记

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

通常,我会安装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~

评论已关闭。