来源:http://www.seayee.net/article/info_28.html
作为程序员在写博客文章的时候,经常要插入些代码片断,很多博客系统都提供代码语法着色高亮显示的功能或插件,让代码显示更直接明了。上网搜索了一下相关的文章不少,大同小异,本人一直使用的是CKeditor的文字编辑器,所以偿试使用网上很多网友介绍的SyntaxHighlighter配合CKEditor插件的方式实现。可能是因为SyntaxHighlighter和CKEditor版本不同,过程中遇到了一些问题,解决的同时也根据个人理解做部分调整,所以本文所描述的方法仅供参考。
一、SyntaxHighlighter简介
SyntaxHighlighter(原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代码进行语法着色的独立JavaScript库。
下载网站:http://alexgorbatchev.com/SyntaxHighlighter/
本文使用的版本是3.0.83版,下载后只需要syntaxhighlighter文件夹下的“scripts”和“styles”文件夹内的文件,在代码语法着色高亮显示的页面引用“styles/shCore.css”样式文件,“scripts/shCore.js”JS文件,因为每一种代码语言都要引用各自的JS文件,为了降低HTTP请求,把所有代码语言的JS文件内容都放到一个“scripts/shBrushSeaYee.js”JS文件里,把所代码写成一行,优化一下。
例如:
1
2
3
4
|
<link rel=
"stylesheet"
type=
"text/css"
href=
"/syntaxhighlighter/styles/shCoreDefault.css"
/>
<script language=
"javascript"
type=
"text/javascript"
src=
"/syntaxhighlighter/scripts/shCore.js"
></script>
<script language=
"javascript"
type=
"text/javascript"
src=
"/syntaxhighlighter/scripts/shBrushSeaYee.js"
></script>
<script type=
"text/javascript"
>SyntaxHighlighter.all();</script>
|
二、CKEditor简介
CKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。它原名FCKEditor,在2009年发布更新到3.0,并改名为CKEditor。原来叫FCK,是因为最初的开发者叫Frederico Calderia Knabben;现在叫CK,意指"Content and Knowledge"。据官方的解释,CKEditor是对FCKEditor的代码的完全重写,而且此项工作从2007年就开始了,更新包括:新的用户界面,一个支持Plug-in的Javascript API,并提供对视觉障碍者的使用支持。
下载网站:http://ckeditor.com/
本文使用的版本是3.5.3版,安装配置都比较简单,本文不再赘述。
三、CKEditor代码语法着色高亮显示的插件开发
1、在"ckeditor\plugins\"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin.js",输入以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
CKEDITOR.plugins.add(
'insertcode'
,
{
init:
function
(editor)
{
//plugin code goes here
var
pluginName =
'Insertcode'
;
CKEDITOR.dialog.add(pluginName,
this
.path +
'insertcode.js'
);
editor.config.flv_path = editor.config.flv_path || (
this
.path);
editor.addCommand(pluginName,
new
CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton(
'Insertcode'
,
{
label:
'插入代码'
,
command: pluginName,
icon:
this
.path +
'insertcode.gif'
});
}
});
|
注:第1行代码中“insertcode”必须与文件夹名称相同且区分大小写字母,因为在Linux系统的Web服务器中,路径是区分大小写字母的。
2、"insertcode"目录下放入一个"insertcode.gif"16*16大小的图片,可自己做或上网找。
3、"insertcode"目录下新建一个"insertcode.js",输入如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
CKEDITOR.dialog.add(
'Insertcode'
,
function
(editor){
var
escape =
function
(value){
return
value;};
return
{
title:
'插入代码'
,
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 720,
minHeight: 520,
contents: [{
id:
'cb'
,
name:
'cb'
,
label:
'cb'
,
title:
'cb'
,
elements: [{
type:
'select'
,
label:
'Language'
,
id:
'lang'
,
required:
true
,
'default'
:
'csharp'
,
items: [[
'ActionScript3'
,
'as3'
], [
'Bash/shell'
,
'bash'
], [
'ColdFusion'
,
'cf'
], [
'C#'
,
'csharp'
], [
'C++'
,
'cpp'
], [
'CSS'
,
'css'
], [
'Delphi'
,
'delphi'
], [
'Diff'
,
'diff'
], [
'Groovy'
,
'groovy'
], [
'JavaScript'
,
'js'
], [
'Java'
,
'java'
], [
'JavaFX'
,
'jfx'
], [
'Perl'
,
'perl'
], [
'PHP'
,
'php'
], [
'Plain Text'
,
'plain'
], [
'PowerShell'
,
'ps'
], [
'Python'
,
'py'
], [
'Ruby'
,
'rails'
], [
'Scala'
,
'scala'
], [
'SQL'
,
'sql'
], [
'Visual Basic'
,
'vb'
], [
'XML'
,
'xml'
]]
}, {
type:
'textarea'
,
style:
'width:718px;height:450px'
,
label:
'Code'
,
id:
'code'
,
rows: 31,
'default'
:
''
}]
}],
onOk:
function
(){
code =
this
.getValueOf(
'cb'
,
'code'
);
lang =
this
.getValueOf(
'cb'
,
'lang'
);
html =
''
+ escape(code) +
''
;
editor.insertHtml(
"<pre class=\"brush:"
+ lang +
";\">"
+ html +
"</pre>"
);
},
onLoad:
function
(){}
};
});
|
4、在"ckeditor\"目录下找到“config.js”文件,这是CKEditor的配置文件,添加如下代码:
1
|
config.extraPlugins =
'insertcode'
;
|
注:代码中“insertcode”也必须与文件夹名称相同,区分大小写字母。
要在CKEditor工具栏添加按钮就在此配置文件中添加上“,Insertcode”,依然要注意区分大小写字母。至此就大功造成了。