用了一个上午的时间来研究SyntaxHighlighter，不得不承认，SyntaxHighlighter的确强大而且美观，不仅提供了对大多数编程语言的支持，而且提供了非常多的代码高亮主题以供选择。
不过SyntaxHighlighter对html代码的高亮让人有点闹心。
官方文档说设置 html-script 为true，同时引入 shBrushXml.js 即可设置 html 代码高亮，然后我测试之后发现实际情况并非如此，被高亮的整个代码块根本无法正常显示。
我查看了官方 demo 的html源代码，发现示例中所有 html 标签的左尖括号全部被替换为了[ < ]，我如法炮制，发现秘密就在于此，原来 SyntaxHighlighter 需要对 html 标签中左尖括号进行如此替换之后才能正常高亮显示。
从官方的安装文档中也发现对该问题的说明：
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
另外，测试了一下其他的JavaScript版代码高亮工具，发现无法直接高亮html代码是一个普遍问题。
SyntaxHighlighter 安装说明
1、 引入shCore.js 和 shCore.css ；
2、 引入所需要的brushes，比如高亮显示JavaScript需要引入shBrushJScript.js;
3、引入级联样式表文件：shCore.css 和 shThemeDefault.css ；
4、 用<pre>标签标识准备高亮显示的代码段；
5、 调用SyntaxHighlighter.all()方法。
SyntaxHighlighter的引入其实很简单，参照下载文件中的示例可以很快上手。
SyntaxHighlighter 配置说明
SyntaxHighlighter可以通过3种方式进行配置：
SyntaxHighlighter.config
SyntaxHighlighter.config中的配置项的作用范围是被高亮显示的整个代码块，而对于代码块中单行的代码则没有什么意义，以下为具体配置项的说明：
bloggerMode
如果你要高亮的内容位于blogger.com，那么你需要开启这个开关。
默认值：false
strings
该配置项允许你修改默认信息。
默认值：Object
stripBrs
该选项会自动过滤掉被高亮代码块中每行后面自动添加的
标签。
默认值：false
tagName
该配置项允许使用其他标签来标识代码块。
默认值：”pre”
示例：
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
SyntaxHighlighter.defaults
SyntaxHighlighter.defaults中的配置项的应用对象是代码块中的单行代码。
auto-links
是否自动检测代码块中的超链接。关闭该配置型，则代码块中的链接被关闭，无法点击进入。
默认值：true
class-name ”
加入自定义样式。
collapse
代码块是否默认折叠。
默认值：false
first-line
该配置项允许修改起始行的行号。
默认值：1
gutter
该配置项用来设置行号显示与否。
默认值：true
highlight
该配置项用来着重显示某些代码行。可以通过单个数字来着重显示单行，或者传入一个类似 [1, 2, 3] 的数组来着重显示指定的多行。
默认值：null
html-script
开启该配置项可以高亮显示HTML/XML代码，这在WEB开发中非常常见。开启该配置项需要shBrushXml.js的支持，同时你的brush也需要支持该特性。
默认值：false
smart-tabs
该配置项用来开启或关闭 mart tabs 特性。
默认值：true
tab-size
该配置项用来设置代码块中tab键的大小。
默认值：4
toolbar
配置项用来设置工具栏的显示与否。
默认值：true
示例：
SyntaxHighlighter.defaults[‘gutter’] = false;
SyntaxHighlighter.defaults[‘smart-tabs’] = false;
…
SyntaxHighlighter.all();
Parameters
Parameters仅在当前代码段中生效，我们可以利用Parameters的这个特性为同一页面的不同代码段设置不同的高亮效果。Parameters利用键值对进行设置，这种形式同CSS非常类似。
通过设置Parameters，我们可以修改 SyntaxHighlighter.defaults 中的任意配置项的默认值。
示例：
…