来源: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)
{
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”,依然要注意区分大小写字母。至此就大功造成了。
分享到:
相关推荐
代码语法高亮的JS插件及例子,基于SyntaxHighlighter实现的CSS、PHP、ASP、SQL、XHTML代码自动高亮插件,若你是开发者网站,这个功能对你绝对有用,下载插件包,自带有使用演示。
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站
SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 博文参考地址:http://blog.csdn.net/itmyhome1990/article/details/38517737
SyntaxHighLighter代码高亮插件实例(支持JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类)版本_2.1.364
SyntaxHighlighter是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:...
wps代码块插件
db.SyntaxHighlighter 语法高亮插件下载,SyntaxHighlighter几乎支持所有编程语言的代码高亮功能,你可将需要高亮的代码放入Textarea中,本插件会自动获取内容后根据初始设置高亮代码中的关键字、常量、变量、函数名...
实现在网页上插入代片断,美观,方便使用。
现在大家可以不必像我这样为了实现代码高亮的功能,去修改ckeditor编辑器,大家可以去使用百度编辑器(Ueditor)他有代码高亮的功能,还蛮好用的,我的个人网站就是的百度编辑器的。欢迎大家去我的博客看看
昨天匆忙发了个更新版,今天去找ckeditor的api文档看了很久,终于找到解决办法了
CKEditor代码高亮整合示例源码 项目描述 此示例把编辑器ckeditor和代码高亮syntaxhighlighter两个插件 整合到一起,这样编辑器就可以高亮显示代码信息了。 读起来很舒服。 欢迎感兴趣的用户下载学习。
JS代码高亮插件SyntaxHighlighter demo
Discuz7使用syntaxhighlighter_2.0.320实现代码高亮
SyntaxHighlighter高亮插件,可以格式化JAVA、PHP、CSS、SQL、XML、Python等等一些主流的代码格式。
主要介绍了帝国CMS FCKeditor编辑器添加插入代码插件方法(基于SyntaxHighlighter代码高亮插件),需要的朋友可以参考下
FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,FCKeditor + SyntaxHighlighter 让代码高亮着色,可以最小化修改您的程序实现效果
syntaxhighlighter 是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库 代码高亮插件 html pre 各种显示高亮的主题 官网下载链接在文档中
内附官方原版的 和我改过的 有兴趣的自己下去看吧 我改了后删了很多东西 合并了很多东西 内附demo
对于一些程序代码类的网页,常常需要贴出代码,但显示效果...这里介绍一个代码高亮工具syntaxhighlighter语法高亮工具,它不需要与服务器交互,只需要包含相应的格式代码JS包,就可以轻松实现代码高亮,使用非常简单。