爱华网查看syntaxhighlighter语法高亮在线演示http://www.biuuu.com/demo/syntaxhighlighter/index.html
第一步，下载syntaxhighlighter语法高亮源码包，当前版本是2.0.320
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
第二步，解压文件包，文件包内容如下：
第三步，如何使用syntaxhighlighter语法高亮工具，以PHP为例
一，包含文件部分
<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script>
shCore.js是一个核心包，其次分别是shBrushCss.js、shBrushJScript.js和shBrushPhp.js，因为只需要对PHP代码进行高亮，所以其它的语法包没有包含，把有用的JS包包含就行，这样一方面有利于减少代码，另一方面加速网页打开的速度。
其次就是两个核心的CSS样式
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
这二个CSS样式是一定需要的，因为所有的显示控制都在这两个CSS样式文件中。
二，Javascript部分
<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
这里有一个剪贴板配置，然后调用了一个all()方法，表示调用包含文件中的所用语法包。
三，HTML部分
<pre> //PHP数组高亮显示 $webName = array('必优博客'); $webUrl = array('http://www.biuuu.com/'); $web = array_merge($webName,$webUrl); print_r($web); function goCurrent(){ $name = __FILE__; echo $name; } </pre>
注意HTML部分，HTML代码显示在标签为<pre></pre>中，syntaxhighlighter默认会自动查找<pre />标签，其中标签可自定义，可以是<div />，<ul />，<ol />等等，只需要加上如下配置代码：
SyntaxHighlighter.config.tagName = 'div';
同时根椐class类名选择不同的格式刷，由于本文以PHP为实例，因此格式刷配置为PHP，如上：
如上方法就实现了PHP语法高亮显示，是不是非常简单！
当我们把鼠标移动到代码区域时会显示一个工具条，如下：
分别是显示代码，复制代码，打印代码和帮助四个功能，默认为英文，可以对这个工具条进行设置，如下代码：
SyntaxHighlighter.config.strings = { expandSource : '展开代码', viewSource : '查看代码', copyToClipboard : '复制代码', copyToClipboardConfirmation : '代码复制成功', print : '打印', help : '?', alert: '语法高亮nn', noBrush : '不能找到刷子: ', brushNotHtmlScript : '刷子没有配置html-script选项', aboutDialog : '<div></div>' }
至于如何显示提示文本，可自定义设置，其中最后一个选项aboutDialog 表示帮助对话框，可自定义配置HTML内容。
其它一此配置大家可以查看shCore.js文件，分别有一个defaults和config选项，可自定义配置其中的选项。
使用syntaxhighlighter语法高亮工具非常简单，轻松优化你的代码高亮显示，试试吧！
查看syntaxhighlighter语法高亮在线演示
http://www.biuuu.com/demo/syntaxhighlighter/index.html
下载syntaxhighlighter语法高亮实例源码包
http://jquerycodes.googlecode.com/files/syntaxhighlighter.rar
原创文章如转载，请注明：转载自 必优博客 http://www.biuuu.com/
本文链接地址：http://www.biuuu.com/p976.html
