对于一些程序代码类的网页，常常需要贴出代码，但显示效果往往很难让人满意(不能突出代码)，如必优博客使用的代码高亮都是使用CSS控制输出的，不是真正意义上的代码高亮，只是显示形式类似于代码显示，那如何实现一个代码高亮效果？发现现在很多的代码高亮都需要与服务端交互，使用也比较麻烦。这里介绍一个代码高亮工具syntaxhighlighter语法高亮工具，它不需要与服务器交互，只需要包含相应的格式代码JS包，就可以轻松实现代码高亮，使用非常简单，本文以PHP为实例，谈谈如何使用syntaxhighlighter语法高亮工具优化你的代码显示，让你的代码更加具有吸引力，首先看一下PHP实例的效果图：
查看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 class="brush: php;">
- //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，如上：class="brush: php;"
如上方法就实现了PHP语法高亮显示，是不是非常简单！
当我们把鼠标移动到代码区域时会显示一个工具条，如下：
分别是显示代码，复制代码，打印代码和帮助四个功能，默认为英文，可以对这个工具条进行设置，如下代码：
- SyntaxHighlighter.config.strings = {
- expandSource : '展开代码',
- viewSource : '查看代码',
- copyToClipboard : '复制代码',
- copyToClipboardConfirmation : '代码复制成功',
- print : '打印',
- help : '?',
- alert: '语法高亮\n\n',
- 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
