用了一个上午的时间来研究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 中的任意配置项的默认值。

示例：

…