代码着色器SyntaxHighlighter

       最近在做一个页面设计器，需要将生成的html代码展示出来，想要高亮显示标签代码，于是在网上发现SyntaxHighlighter这个组件，能够满足我的需求，最新版本：3.0.83

地址：http://alexgorbatchev.com/SyntaxHighlighter/

不同语言绑定的js参考文档：http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

公共参数：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

gitHub上可以下载开发版：https://github.com/alexgorbatchev/SyntaxHighlighter

 

       下载组件包

       只需把scripts和styles两个文件夹导入自己工程当中即可

 

在页面中加入以下代码：

<script type="text/javascript" src="js/scripts/shCore.js"></script>//核心包
<script type="text/javascript" src="js/scripts/shBrushXml.js"></script>//处理xml,html，xhtml等
<link type="text/css" rel="stylesheet" href="css/styles/shCoreDefault.css"/>//默认css
<script type="text/javascript">
SyntaxHighlighter.config.stripBrs = true;//每一行末尾有<br />，不忽略处理
SyntaxHighlighter.defaults['toolbar'] = false;//隐藏工具栏，一个捐助的链接
SyntaxHighlighter.defaults['quick-code'] = false;//通过双击能够快速拷贝和粘贴代码，我这里禁用
SyntaxHighlighter.all();
</script>

   

    页面中，只需将要显示的代码用<pre class="brush: xml;">html代码</pre>包住即可，但是一般代码都是后生成的，而SyntaxHighlighter.all();方法是绑定到window.onload中了，也就是说页面加载，这方法就完事了，可悲催的是我们代码还没生成呢，您就给先搞了一把，那您就别逗我了。

    比如，代码显示在<div id="code"></div>当中，有一个按钮<input type="button" onclick="showCode();"  value="CODE" />,当我们点击此按钮后，代码才生成，然后才被高亮显示。

       

function showCode() {
	var gHtml = "<a>aaaa</a><p>dddd</p>";//html代码
	var h= '<pre class="brush: xml;">'+gHtml+'</pre>';
	$("#code").html(h);
	SyntaxHighlighter.highlight();
}

 

    这样我们就能搞定它了。