2014-08-31 10:48:55|?次阅读|上传:wustguangh【已有?条评论】发表评论
Parameters 允许你根据自己的喜好定制单个节点(eg:<pre />)的SyntaxHighlighter解析规则。通过设置节点的 class 特性的属性值为特殊的键值对实现。
通过这种方式,你可以改变 SyntaxHighlighter.defaults 中设置的默认值。
例子:
<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>
更多参数实例你可以查看SynatxHighlighter提供的示例文件:syntaxhighlighter_tests.html
使用步骤
1. 页面中引入shCore.js 和 shCore.css 核心文件。
2. 页面中引入需要代码着色对应语言的笔刷脚本文件(brush.js)。
2.1) 现成的各种笔刷脚本文件下载,请进入……
2.2) 如何创建自定义笔刷文件,请进入…… (模式挺简单的,拿现成的笔刷文件改改就好)
3. 页面中引入代码着色主题色样式文件(eg:shThemeDefault.css)。
4. 创建<pre />或<script />节点包裹要进行代码着色的代码片段,该创建节点必须含有一个特殊格式的 class 属性,eg:<pre class="brush: js">……</pre>
5. 调用 SyntaxHighlighter.all() 开始解析<pre />或<script />节点。
<pre /> 方式(推荐方式)
优势:使用此方式时,如果存在脚本错误,则会以常规的 <pre /> 解析并显示在所有RSS阅读器中。
问题:所有的右尖括号必须进行HTML转义(escape),即: < 必须替换为 < 才能确保正确解析。(注意,如果此处没有进行转义,那么后面的html标签都变成字符串)
原理:Syntaxhighlighter 搜寻 <pre /> 标签,这个标签需满足条件:携带一个特殊格式的 class 特性,值的格式类似CSS,并且该值必须包含brush(笔刷)参数。
<script /> 方式
优势:将代码放置在CDATA节点内部,无需再进行任何转义(PS:<pre /> 需将 < 转义为 < ),所以这种方式允许你直接使用从别的编辑器 “复制并粘贴” 来的代码。
问题:
1) <script /> 标签无法在RSS阅读器中使用,所以如果你在 blog 上使用 SyntaxHighlighter 插件,那么使用 <pre /> 方式更加有益。
2) 如果包裹的代码块中包含一个结束标签(eg,</script>),甚至内置在 CDATA 块中,大多数浏览器也无法正确解析 <script type="syntaxhighlighter"> 。
原理:Syntaxhighlighter 搜寻 <script type="syntaxhighlighter"> 标签,这个标签需满足条件:携带一个特殊格式的 class 特性,值的格式类似CSS,该值必须包含brush(笔刷)参数,并且代码块内嵌在 <![CDATA[code]]> 中。
关于CDATA
CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Data)。
1) 在 XML 元素中,"<" 和 "&" 是非法的。"<" 会产生错误,因为解析器会把该字符解释为新元素的开始。"&" 也会产生错误,因为解析器会把该字符解释为字符实体的开始。某些文本,比如 JavaScript 代码,包含大量 "<" 或 "&" 字符。为了避免错误,可以将脚本代码定义为 CDATA。
2) CDATA 部分中的所有内容都会被解析器忽略。
3) CDATA 部分由 "<![CDATA[" 开始,由 "]]>" 结束。
4) CDATA 部分不能包含字符串 "]]>"。也不允许嵌套的 CDATA 部分。
5) 标记 CDATA 部分结尾的 "]]>" 不能包含空格或折行。
SyntaxHighlighter 插件的核心代码在 shCore.js 文件中,内部主要包含了 SyntaxHighlighter对象(和 XRegExp 对象,XRegExp在官方下载的源码中找不到,可能官方遗漏了)。
在 SyntaxHighlighter 启动前,我们可以选择性对defaults 和config 进行配置,但是必须在确保在启动前将相应的 brush.js 引入到当前页面,否则启动时会报找不到 brush 的错误(config.strings.noBrush)。
brush.js 文件的作用是让brush继承自 SyntaxHighlighter.Highlighter() 对象并且将 brush 添加到 SyntaxHighlighter.brushes 对象中。
关键代码:
Brush.prototype = new SyntaxHighlighter.Highlighter(); SyntaxHighlighter.brushes.CSharp = Brush;