一、下载插件：
xheditor:可到http://xheditor.com/下载
prettify:可到http://code.google.com/p/google-code-prettify/下载
xheditor是一款小巧的html编辑器，采用的是Jquery技术,相信很多人都用过。
prettify是Google开发的一款轻量级的代码高亮显示插件，这款插件比起常用的SyntaxHighlighter来，要小巧得多。它的原理就是将代码放到一个pre块里面，然后对pre块里面的内容进行高亮显示。
二、加载插件。
如果编辑器和显示内容是在同一个网页，那么需要加载js文件和css文件。
< script type ="text/javascript" src ="jquery/jquery-1.4.2.min.js" ></ script > < script type ="text/javascript" src ="xheditor/xheditor-1.1.6-zh-cn.min.js" ></ script > < script type ="text/javascript" src ="xheditor/prettify/prettify.js" ></ script > < link href ="xheditor/prettify/prettify.css" rel ="stylesheet" type ="text/css" />前两行用于编辑器，后两行用于显示高亮代码。如果发表文章和显示文章分属两个页面，可分开加载。
三、修改编辑器
把xheditor下载解压后，可放到网站根目录文件夹xheditor里面，prettify下载解压后可放在文件夹xheditor里面，注意路径问题。
1、制作一个图标。
可用制图工具做一个gif的小图标，放到prettify文件夹下面。
然后写一个CSS引入：
.btnCode { background : transparent url(xheditor/prettify/code.gif) no-repeat 16px 16px ; background-position : 2px 2px ; }2、为多行文本框加载xheditor编辑器。
在有多行文本框的页面，加上一段js代码： < script type = " text/javascript " > var editor;$(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="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.showDialog(jCode); }} }; editor = $( ' #txtTopic ' ).xheditor({plugins:allPlugin,tools: ' Fontface,FontSize,Bold,Italic,Underline,Removeformat,Source,Code ' });} < / script>其中tools:'Fontface,FontSize,Bold,Italic,Underline,Removeformat,Source,Code'这个地方用于显示的图标工具，可随意设定。txtTopic为多行文本框的id.
3、显示代码
在显示页的body标记里面加上οnlοad='prettyPrint()'即
< body onload ="prettyPrint()" >大功造成。
转载于:https://www.cnblogs.com/denny402/archive/2011/04/11/denny403.html
相关资源：各显卡算力对照表！