xheditor+ syntaxhighlighter插件实现代码高亮

一、准备工作是下载

这两个插件。

二、然后添加到你的项目中，然后在页面中的导入进去。某些版本还需导入<SCRIPT src="js/shCoreCommon.js" type=text/javascript></SCRIPT>

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<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>

经过以上两步实际效果就可以出来了~