SyntaxHighlighter和CKEditor插件可以轻松创建代码语法着色

在网上搜了一下，相关的文章也不少，非常相似。我一直在使用CKEditor的文本编辑器，所以我尝试使用网上很多网友介绍的SyntaxHighlighter来配合CKeditor插件。可能是因为SyntaxHighlighter和CKEditor版本不同，在过程中遇到了一些问题，根据个人理解做了一些调整，所以本文描述的方法仅供参考。

1.语法高亮器简介语法高亮器(原名dp。SyntaxHighlighter)是一个独立的JavaScript库，在浏览器上对各种代码进行语法着色。下载网站：http://alexgorbatchev.com/SyntaxHighlighter/我们下载了：//www . JB 51 . net/codes/15916 . html本文使用的版本是3.0.83版本。下载后只需要语法高亮文件夹下的“scripts”和“style”文件夹中的文件，并参考“style/shcore . CSS”样式文件和“scripts/shcore”。js”页面上的js文件由代码语法高亮显示，因为每种代码语言都必须引用自己的JS文件。为了减少HTTP请求，将代码语言中的所有JS文件放入一个“scripts/shbruneayee . JS”JS文件中，将代码编写成一行并进行优化。例如，复制代码如下： linkrel='样式表'类型=' text/CSS ' href='/语法highlight er/styles/shcorefault . CSS '/脚本语言='javascript '类型=' text/JavaScript ' src=' http :/syntaxhighlight/scripts/shcore . js '/脚本语言=' JavaScript '类型=' text/JavaScript ' src=' http 3360/syntaxhighlightCKeditor简介CKEditor是一个开源的所见即所得的文本编辑器，专门用于网页。它的目标是重量轻，无需复杂的安装步骤即可使用。它可以与不同的编程语言相结合，如PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java和ABAP。最初名为FCKEditor，2009年更新为3.0，更名为CKEditor。它最初被称为FCK，因为最初的开发者是弗雷德里克卡尔德利亚克纳本；现在它被称为CK，意思是“内容和知识”。根据官方的解释，CKEditor是对FCKEditor代码的完全重写，这项工作从2007年就开始了。这些更新包括：一个新的用户界面，一个支持插件的Javascript API，以及对视觉障碍者的支持。下载网站：http://ckeditor.com/,本文使用的版本是3.5.3版本，安装和配置都比较简单，这里就不赘述了。3.带有语法着色和CKEditor代码1高亮显示的插件开发。在“ckeditor\plugins”目录下创建一个新的“insertcode”目录，然后在“insertcode”目录下创建一个新的“plugin.js”。输入以下代码：复制代码如下： cke ditor . plugins . add(' insert code '，{ init : function(editor){//plugin code go to here var plugin name=' insert code '；CKEDITOR.dialog.add(pluginName，this . path ' insert code . js ')；editor . config . flv _ path=editor . config . flv _ path | |(this . path)；editor.addCommand(pluginName，new ckeditor . dialogcommand(pluginName))；editor . ui . add button(' insert code '，{label:' insert code '，command: plugin name，icon : this . path ' insert code . gif ' })；} });注意：第一行代码中的“insertcode”必须与文件夹名称相同，区分大小写字母，因为在Linux系统的Web服务器中，路径区分大小写字母。2.大小为' insertcode.gif'16*16的图片放在' insertcode '目录下，可以自己制作，也可以在网上搜索。

3 ,'插入代码'目录下新建一个' insertcode.js '，输入如下代码：复制代码代码如下： ckeditor。对话。添加('插入代码'，函数（编辑器){ var escape=function(value){ 0返回值；};返回{ title: '插入代码resizable: CKEDITOR .DIALOG_RESIZE_BOTH，minWidth: 720，minHeight: 520，contents: [{ id: 'cb '，name: 'cb '，label: 'cb '，title: 'cb '，element s 3360[{ type : ' select '，label: 'Language '，id: ' lang '，required: true '，default ' : ' csharp '，items的getvalue(' CB '，' Code ')；lang=this.getValueOf('cb '，' lang ')；html=' '转义符（代码)' ';编辑。插入HTMl(' pre class=\ ' brush : ' lang '；\ ' ' html '/pre ')；}，onLoad:函数(){ } };});4、在' ckeditor\ '目录下找到" config.js "文件，这是CKEditor的配置文件，添加如下代码：复制代码代码如下：配置。额外插件=“插入代码”；注：代码中"插入代码"也必须与文件夹名称相同，区分大小写字母。要在CKEditor工具栏添加按钮就在此配置文件中添加上",插入代码",依然要注意区分大小写字母。至此就大功造成了。