回到顶部
您的当前位置: 编程语言> 前端> 3th> 其他
SyntaxHighlighter的代码高亮插件参数设置详细解说
2017-09-26 14:47:39
标签: 转载 SyntaxHighlighter 3.0.83 参数详细
SyntaxHighlighter源码下载

源码: SyntaxHighlighter 示例源码下载

非官方原版,做了如下调整:

① 原版的demo程序存在bug,调整了demo程序(下面的贴图是调整后的demo)。

② src\shCore.js未压缩的源代码中缺失RegExp对象,造成只能使用scripts\ shCore.js加密混淆文件,造成调试和学习上的不便。我这里将在调试环境中解密后的RegExp对象抽出来,放入src\shCore.js使插件可正常使用(但是RegExp对象的代码依然是压缩过的)。

③ 原版可在官网下载,请进入……

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.jsSyntaxHighlighter插件的核心实现文件,根据特殊的 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为当前页面的所有待着色代码块配置通用设置,这些配置不会再被单个元素设置所覆盖。

名称默认值描述
space‘&nbsp;’
useScriptTagstrue是否支持解析 <script type=”syntaxhighlighter” /> 标签。
bloggerModefalse博客模式。如果在博客网上使用该插件,因为通常博主习惯用 <br /> 替换所有的新行(’ ’),这会造成SyntaxHighlighter插件无法拆开每一行。开启此选项内部会将 <br /> 替换为新行’ ’代码为:if (sh.config.bloggerMode == true)str = str.replace(br, '\n');
stringBrsfalse如果您的软件会在每行末尾添加 < br / > 标记,此选项允许您忽略这些标记。代码为:if (sh.config.stripBrs == true)str = str.replace(br, '');
tagName‘pre'可以更改解析的默认Tag。
strings

允许改变默认的提示信息。

201209281840546064.jpg

//事例代码
2.SyntaxHighlighter.config.bloggerMode =true;
3.//……
4.SyntaxHighlighter.all();
SyntaxHighlighter默认设置

SyntaxHighlighter.defaults为当前页面待着色代码块配置默认设置,这些默认值可根据待着色代码块的 class 属性设置进行覆盖。

名称默认值描述
‘class-name’‘’将额外的css类添加到当前元素进行特殊样式展现。这个做为style 属性的值,权级高,可覆盖如样式文件中定义的样式。
‘first-line’1设定行号的起始数值。
‘pad-line-numbers’false

标识行号至少几位数去显示。可接受:数值;若为true|false 则true代表至少2位,false则至少1位。

201209281840568214.jpg

‘highlight’null标记重要行,让它们高亮显示。多行之间用逗号“,”分割
‘title’null设置显示在被着色代码块上方的Title。
‘smart- tabs’true设置是否支持智能缩进。确保你的代码格式发布到网页显示后不会因空格或缩进造成变形。
‘tab-size’4自定义 Tab 的输入宽 度。
‘gutter’true设置是否在代码前面显示行号。
‘toolbar’true设置是否显示工具栏。
quick-code’true设置是否启 用“双击”快速代码复制和粘贴。
‘collapse’
collapse标识是否在页面加载时默认将代码折叠起来,在博文中代码篇幅较大时此设置非常有用。
‘auto-links’true标识是否开启将代码中的超链接文字套上<a>标签,即可以直接点击链接
‘light’false该属性用来 控制是否开启轻量模式。开启轻量模式等同于gutter = false  +  toolbar = false。
‘html-script’false标识是否开启 HTML/XML 标签着色特性。(必须载入 xml 的笔 刷 shBrushXml.js)
//代码事例
SyntaxHighlighter.defaults['gutter'] =false;
SyntaxHighlighter.defaults['smart-tabs'] =false;
//……
SyntaxHighlighter.all();
Parameters

Parameters 允许你根据自己的喜好定制单个节点(eg:<pre />)的SyntaxHighlighter解析规则。通过设置节点的 class 特性的属性值为特殊的键值对实现。
通过这种方式,你可以改变 SyntaxHighlighter.defaults 中设置的默认值。

<pre class="brush:js; ruler: true; first-line: 10; highlight: [2, 4, 6]"">
//事例代码:
Yii::app()-cache;
</pre>

更多参数实例请查看文件:syntaxhighlighter_tests.html

SyntaxHighlighter使用步骤

① 页面中引入shCore.js 和 shCore.css 核心文件。

② 页面中引入需要代码着色对应语言的笔刷脚本文件(brush.js)。

  • 现成的各种笔刷脚本文件下载,请进入……

  • 如何创建自定义笔刷文件,请进入……(模式挺简单的,拿现成的笔刷文件改改就好)

③ 页面中引入代码着色主题色样式文件(eg:shThemeDefault.css)。

④ 创建<pre />或<script />节点包裹要进行代码着色的代码片段,该创建节点必须含有一个特殊格式的 class 属性,eg:<pre>……</pre>

⑤ 调用 SyntaxHighlighter.all()解析方式<pre />或<script />节点:

<pre />方式(推荐方式)

  • 优势:使用此方式时,如果存在脚本错误,则会以常规的 <pre /> 解析并显示在所有RSS阅读器中。

  • 问题:所有的右尖括号必须进行HTML转义(escape),即: < 必须替换为 &lt; 才能确保正确解析。(注意,如果此处没有进行转义,那么后面的html标签都变成字符串)

  • 运作:Syntaxhighlighter 搜寻 <pre /> 标签,这个标签需满足条件:携带一个特殊格式的 class 特性,值的格式类似CSS,并且该值必须包含brush(笔刷)参数。

<script />方式

  • 优势:将代码放置在CDATA节点内部,无需再进行任何转义(PS:<pre /> 需将 < 转义为 &lt; ),所以这种方式允许你直接使用从别的编辑器 “复制并粘贴” 来的代码。

  • 问题:
        1) <script /> 标签无法在RSS阅读器中使用,所以如果你在 blog 上使用 SyntaxHighlighter代码整理插件,那么使用 <pre /> 方式更加有益。
        2) 如果包裹的代码块中包含一个结束标签(eg,</script>),甚至内置在 CDATA 块中,大多数浏览器也无法正确解析 <script type="syntaxhighlighter"> 。

  • 运作:Syntaxhighlighter 搜寻 <script type="syntaxhighlighter"> 标签,这个标签需满足条件:携带一个特殊格式的 class 特性,值的格式类似CSS,该 值必须包含brush(笔刷)参数,并且代码块内嵌在<![CDATA[code]]> 中。