xheditor+ syntaxhighlighter外掛程式實現代碼高亮

一、準備工作是下載

這兩個外掛程式。

二、然後添加到你的項目中，然後在頁面中的匯入進去。某些版本還需匯入<SCRIPT src="js/shCoreCommon.js" type=text/javascript></SCRIPT>

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link><link href="css/prettify.css" rel="stylesheet" type="text/css" /><script  src="js/jquery-1.4.4.min.js" type="text/javascript"></script><script  src="js/xheditor-1.1.14-zh-cn.min.js" type="text/javascript"></script><script type="text/javascript" src="js/prettify/prettify.js"></script> <script type="text/javascript" src="js/ubb.min.js"></script><script type="text/javascript" src="js/Scripts/shCore.js"></script><script type="text/javascript" src="js/Scripts/shBrushCpp.js"></script><script type="text/javascript" src="js/Scripts/shBrushCSharp.js"></script><script type="text/javascript" src="js/Scripts/shBrushJava.js"></script><script type="text/javascript" src="js/Scripts/shBrushSql.js"></script><script type="text/javascript" src="js/Scripts/shBrushXml.js"></script><script type="text/javascript" src="js/Scripts/shBrushPhp.js"></script><script type="text/javascript" src="js/Scripts/shBrushJScript.js"></script><script type="text/javascript" src="js/Scripts/shBrushVb.js"></script><script language="javascript">window.onload = function () {    dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';    dp.SyntaxHighlighter.HighlightAll('code');}</script>

<script type="text/javascript">  $(pageInit);function pageInit(){var plugins={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="c#">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.pasteText('<pre name="code" class="'+jType.val()+'">'+jValue.val()+'</pre>');_this.hidePanel();return false;});_this.saveBookmark();_this.showDialog(jCode);}}};//這個是需要高亮代碼外掛程式的textarea的id$('#newContent').xheditor({plugins:plugins,tools:'full',showBlocktag:false,forcePtag:false,beforeSetSource:ubb2html,beforeGetSource:html2ubb,shortcuts:{'ctrl+enter':submitForm}});$('#replyContent').xheditor({plugins:plugins,tools:'full',showBlocktag:false,forcePtag:false,beforeSetSource:ubb2html,beforeGetSource:html2ubb,shortcuts:{'ctrl+enter':submitForm}});}function submitForm(){$('#solution').submit();}</script> 

<style type="text/css">.btnCode { background:url(images/code.gif) no-repeat 16px 16px; //這個url根據實際情況寫 background-position:2px 2px; } </style>

經過以上兩步實際效果就可以出來了~