博客：通用代码高亮插件（SyntaxHighlighter）
http://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.html
=============C#.Net 篇目录==============
写这篇博文的起源是我想把自己的博客弄的更加美观，相信你也一样。
首先，我要说SyntaxHighlighter插件的实现方式及应用示例，然后再说明如何将其应用到自己的博客，使博客的代码着色更加美观。
源码: SyntaxHighlighter 示例源码下载
SyntaxHighlighter
SyntaxHighlighter 源码下载
1) Syntaxhighlighter_3.0.83 （下载点见篇头）
非官方原版，做了如下调整：
a) 原版的demo程序存在bug，调整了demo程序（下面的贴图是调整后的demo）。
b) src\shCore.js未压缩的源代码中缺失RegExp对象，造成只能使用scripts\ shCore.js加密混淆文件，造成调试和学习上的不便。我这里将在调试环境中解密后的RegExp对象抽出来，放入src\shCore.js使插件可正常使用（但是RegExp对象的代码依然是压缩过的）。
c) 原版可在官网下载，请进入……
Syntaxhighlighter插件简介
SyntaxHighlighter（原名：dp.SyntaxHighlighter）是一套在浏览器上支持对各种代码进行语法着色的独立 JavaScript 库。官网请进入……
下载 Syntaxhighlighter_3.0.83解压后，里面主要文件介绍如下：
| jQuery-1.4.2.js |
jQuery是一个快速、简单的JavaScript library，它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。jQuery是为改变你编写JavaScript 的方式而设计的。 更多请进入…… |
| qunit.js qunit.css |
QUnit是jQuery团队开发的JavaScript单元测试工具，使用方便，界面美观。它由jQuery，jQuery UI 和jQuery Mobile 项目使用，并可测试任何通用的 JavaScript 代码，包括其本身！ 更多请进入…… |
| shCore.js |
SyntaxHighlighter插件的核心实现文件，根据特殊的 class 配置动态生成常规形式的 html 标签及 class 属性值。包含两个主要对象：XRegExp对象和SyntaxHighlighter对象。 |
| shCore.css |
控制shCore.js生成的 html 文档的布局、字体等。（具体着色由Styles文件夹中的css主题控制，或自定义主题） |
| shAutoloader.js |
提供一种简单的参数方式，实现根据待着色代码块中使用的 brush 来自动根据autoloader对象配置中的隐射加载 brush.js 。 |
| shLegacy.js |
|
| scripts文件夹 |
包含具体语言各自的语法特性：类型、关键字、函数、注释、别名等等信息，用于生成对应的html 及 class 属性值，最后通过css主题进行着色。更多语言笔刷请进入…… |
| Styles文件夹 |
提供一些现成的代码着色css主题，可直接用于项目。 注意：（请下载上方提供的代码，打开此文件夹）这个文件夹下的样式文件的关系：shCore.css + shThemeDefault.css = shCoreDefault.css 演示示例：theme_tests.htm 文件 |
SyntaxHighlighter 插件配置
需要明白的3种Syntaxhighlighter配置
一、 SyntaxHighlighter.config
SyntaxHighlighter.config为当前页面的所有待着色代码块配置通用设置，这些配置不会再被单个元素设置所覆盖。
| 名称 |
默认值 |
描述 |
| space |
‘ ’ |
|
| useScriptTags |
true |
是否支持解析 标签。 |
| bloggerMode |
false |
博客模式。如果在博客网上使用该插件，因为通常博主习惯用 代码为： if (sh.config.bloggerMode == true) str = str.replace(br, '\n'); |
| stringBrs |
false |
如果您的软件会在每行末尾添加 < br / > 标记，此选项允许您忽略这些标记。 代码为： if (sh.config.stripBrs == true) str = str.replace(br, ''); |
| tagName |
‘pre’ |
可以更改解析的默认Tag。 |
| strings |
|
允许改变默认的提示信息。如下图：
|
Example：
|
1
2
3
|
SyntaxHighlighter.config.bloggerMode =
true
;
//……
SyntaxHighlighter.all();
|
二、 SynatxHighlighter.defaults
SyntaxHighlighter.defaults为当前页面待着色代码块配置默认设置，这些默认值可根据待着色代码块的 class 属性设置进行覆盖。
| 名称 |
默认值 |
描述 |
| ‘class-name’ |
‘’ |
将额外的css类添加到当前元素进行特殊样式展现。这个做为 style 属性的值，权级高，可覆盖如样式文件中定义的样式。 |
| ‘first-line’ |
1 |
设定行号的起始数值。 |
| ‘pad-line-numbers’ |
false |
标识行号至少几位数去显示。 可接受：数值；若为true|false 则true代表至少2位，false则至少1位。 Eg：
|
| ‘highlight’ |
null |
标记重要行，让它们高亮显示。多行之间用逗号“，”分割。 |
| ‘title’ |
null |
设置显示在被着色代码块上方的Title。 |
| ‘smart-tabs’ |
true |
设置是否支持智能缩进。确保你的代码格式发布到网页显示后不会因空格或缩进造成变形。 |
| ‘tab-size’ |
4 |
自定义 Tab 的输入宽度。 |
| ‘gutter’ |
true |
设置是否在代码前面显示行号。 |
| ‘toolbar’ |
true |
设置是否显示工具栏。 |
| ‘quick-code’ |
true |
设置是否启用“双击”快速代码复制和粘贴。 |
| ‘collapse’ |
collapse |
标识是否在页面加载时默认将代码折叠起来，在博文中代码篇幅较大时此设置非常有用。 |
| ‘auto-links’ |
true |
标识是否开启将代码中的超链接文字套上标签，即可以直接点击链接 |
| ‘light’ |
false |
该属性用来控制是否开启轻量模式。开启轻量模式等同于gutter = false + toolbar = false。 |
| ‘html-script’ |
false |
标识是否开启 HTML/XML 标签着色特性。（必须载入 xml 的笔刷 shBrushXml.js） |
Example：
|
1
2
3
4
|
SyntaxHighlighter.defaults[
'gutter'
] =
false
;
SyntaxHighlighter.defaults[
'smart-tabs'
] =
false
;
//……
SyntaxHighlighter.all();
|
三、 Parameters
Parameters 允许你根据自己的喜好定制单个节点(eg:
)的SyntaxHighlighter解析规则。通过设置节点的 class 特性的属性值为特殊的键值对实现。通过这种方式，你可以改变 SyntaxHighlighter.defaults 中设置的默认值。
Example：
|
1
|
<
pre
class
=
"brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]"
>...
|
更多参数实例请查看文件：syntaxhighlighter_tests.html
SyntaxHighlighter 如何使用
使用步骤
1. 页面中引入shCore.js 和 shCore.css 核心文件。
2. 页面中引入需要代码着色对应语言的笔刷脚本文件(brush.js)。
a) 现成的各种笔刷脚本文件下载，请进入……
b) 如何创建自定义笔刷文件，请进入…… （模式挺简单的，拿现成的笔刷文件改改就好）
3. 页面中引入代码着色主题色样式文件（eg：shThemeDefault.css）。
4. 创建
或节点包裹要进行代码着色的代码片段，该创建节点必须含有一个特殊格式的 class 属性，eg：……
5. 调用 SyntaxHighlighter.all() 开始解析
或节点。方式（推荐方式）
优势：使用此方式时，如果存在脚本错误，则会以常规的
解析并显示在所有RSS阅读器中。问题：所有的右尖括号必须进行HTML转义（escape），即： < 必须替换为 < 才能确保正确解析。（注意，如果此处没有进行转义，那么后面的html标签都变成字符串）
运作：Syntaxhighlighter 搜寻
标签，这个标签需满足条件：携带一个特殊格式的 class 特性，值的格式类似CSS，并且该值必须包含brush(笔刷)参数。
方式
优势：将代码放置在CDATA节点内部，无需再进行任何转义(PS:
需将 < 转义为 < ),所以这种方式允许你直接使用从别的编辑器 “复制并粘贴” 来的代码。问题：
1) 标签无法在RSS阅读器中使用，所以如果你在 blog 上使用 SyntaxHighlighter 插件，那么使用
方式更加有益。2) 如果包裹的代码块中包含一个结束标签(eg，)，甚至内置在 CDATA 块中，大多数浏览器也无法正确解析