使用 xheditor + prettify 做代码高亮的总结

xhEditor 是一款基于 JQuery 的简单迷你并且高效的在线可视化 Html 编辑器，它可以完美的嵌入到我们自己的博客、网站等中，使用非常方便。我们只需要下载 xhEditor，将其中的 xheditor_emot，xheditor_skin，xheditor_plguins，xheditor_lang 和 xheditor.min.js 文件拷贝到我们项目的根目录下，然后在需要用到 xhEditor 的页面上包含 js 文件，如下：

<script type="text/javascript" src="xhEditor/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="xhEditor/xheditor_lang/zh-cn.js"></script>

因为 xheditor是基于JQuery 的，所以你必须保证导入了JQuery。

调用 xhEditor 的方法一般有两种，第一种是直接在 textarea 上添加属性 class=“xheditor”，另一种是在页面从初始化 js 代码中加上 $("#content").xheditor();其中的 content 即为将要使用 xheditor 的 textarea 的 id。我们可以自定义 xheditor 工具栏的按钮，即使用 tools 加上自己需要的按钮即可，用法为  $("#content").xheditor(tools:'...');可用的工具如下：

参数值：full(完全),simple(简单),mini(迷你)或者自定义字符串，例如：'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd'完整按钮表：GStart：组开始GEnd：组结束Separator：分隔符Cut：剪切Copy：复制Paste：粘贴Pastetext：文本粘贴Blocktag：段落标签Fontface：字体FontSize：字体大小Bold：粗体Italic：斜体Underline：下划线Strikethrough：中划线FontColor：字体颜色BackColor：字体背景色Removeformat：删除文字格式Align：对齐List：列表Outdent：减少缩进Indent：增加缩进Link：超链接Unlink：删除链接Img：图片Flash：Flash动画Media：Windows media player视频Emot：表情Table：表格Source：切换源代码模式Preview：切换预览模式Fullscreen：切换全屏模式About：关于xhEditor
skin：皮肤风格选择

例如我使用的格式为：

tools:'Cut,Copy,Paste,Pastetext,Blocktag,Fontface,FontSize,FontColor,BackColor,Bold,Italic,Underline,Removeformat,Link,Source,Code,Emot,Table'

以上仅仅是 xhEditor 基本的用法，但我们在自己的博客中可能需要加上各种代码高亮的效果，这时可以在 xhEditor 中集成其他的js工具，我使用的是 Google Code Prettify 这个代码高亮工具，它是谷歌开源的一款用于代码高亮的js工具，支持C/C++、Java、Python 等各种语言，使用它也很简单。下载好之后只需将css和js文件放到项目中即可，我放到了之前 xhEditor 文件夹下。

首先在需要体现高亮效果的页面中引入 css 和 js 文件

<link href="xhEditor/prettify/prettify.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="xhEditor/prettify/prettify.js"></script>

prettify 使代码高亮的原理是在你需要高亮的代码块之前加上了 <pre class='prettyprint'></pre> 这个标签。然后我们需要在xhEditor所在页面加上如下这些 js 代码：

<script type="text/javascript">
	$(function() {
		$(pageInit);  
		function pageInit()
		{
		    var allPlugin={
		        
		        Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
		            var _this=this;
		            var htmlCode='<div><select id="xheCodeType">'
		            +'<option value="html">HTML/XML</option><option value="js">Javascript</option>'
		            +'<option value="css">CSS</option><option value="php">PHP</option>'
		            +'<option value="java">Java</option><option value="py">Python</option>'
		            +'<option value="pl">Perl</option><option value="rb">Ruby</option>'
		            +'<option value="cs">C#</option><option value="c">C++/C</option>'
		            +'<option value="sql">sql</option>'
		            +'<option value="vb">VB/ASP</option><option value="">其它</option>'
		            +'</select></div><div>'
		            +'<textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';    
		            var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
		            jSave.click(function(){
		                _this.loadBookmark();
		               	_this.pasteHTML('<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');
		                _this.hidePanel();
		                return false;    
		            });
		            _this.saveBookmark();  
		            _this.showDialog(jCode);
		        }}
		    }
		    $('#content').xheditor({plugins:allPlugin,tools:'Cut,Copy,Paste,Pastetext,Blocktag,Fontface,FontSize,FontColor,BackColor,Bold,Italic,Underline,Removeformat,Link,Source,Code,Emot,Table'});
		}
</script>

其中  c:'btnCode' 这个是我们在xheditor工具栏是显示的代码高亮的那个按钮，我们可以引入一张自己喜欢的小图片，在css 文件中定义一下属性，我的是这样：

.btnCode {
	background: transparent url(../xhEditor/prettify/code.png) no-repeat 16px 16px;
	background-position: 2px 2px;
}

 $('#content').xheditor({plugins:allPlugin,tools:'Cut,Copy,Paste,Pastetext,Blocktag,Fontface,FontSize,FontColor,BackColor,Bold,Italic,Underline,Removeformat,Link,Source,Code,Emot,Table'});

这句其实就是讲 xhEditor 时使用的第二种办法， 有一点需要注意的是，在之前没使用 prettify 时我们可能通过第一种方法来使用 xhEditor，就是 直接在 textarea 上添加属性 class=“xheditor”，如果使用了prettify，我们需要将 textarea 的 class="xheditor" 这个属性去掉，不然效果没法显示。

以上就是使用 xhEditor + prettify 来做代码高亮。