通用代码高亮插件(SyntaxHighlighter)

SyntaxHighlighter是一款众多网站首选使用的高亮插件,网上有许多教程由于是讲到了跟编辑器的搭配使得原本简单易用的插件变成非常复杂,其实这款插件使用方法非常的简单,只需跟着教程一步步即可实现高亮。

SyntaxHighlighter源码下载

syntaxhighlighter_3.0.83.zip

Syntaxhighlighter插件简介

下载 Syntaxhighlighter_3.0.83解压后,里面主要文件介绍如下:

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 插件配置

SyntaxHighlighter.config

为当前页面的所有待着色代码块配置通用设置,这些配置不会再被单个元素设置所覆盖。

名称

默认值

描述

space

‘ ’


useScriptTags

true

是否支持解析 <script type=”syntaxhighlighter” /> 标签。

bloggerMode

false

博客模式。如果在博客网上使用该插件,因为通常博主习惯用 <br /> 替换所有的新行(’\n’),这会造成SyntaxHighlighter 插件无法拆开每一行。开启此选项内部会将 <br /> 替换为新行’\n’

代码为:

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


允许改变默认的提示信息。如下图:

SyntaxHighlighter.defaults

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

名称

默认值

描述

‘class-name’

‘’

将额外的css类添加到当前元素进行特殊样式展现。这个做为 style 属性的值,权级高,可覆盖如样式文件中定义的样式。

‘first-line’

1

设定行号的起始数值。

‘pad-line-numbers’

false

标识行号至少几位数去显示。

可接受:数值;若为true|false 则true代表至少2位,false则至少1位。

‘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)

Parameters 

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

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

SyntaxHighlighter使用步骤

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

<script type="text/javascript" src="scripts/shCore.js"></script>
<link rel="stylesheet" href="styles/shCore.css" />

2.引入你要高亮的语言JS,比如我想高亮显示的是Java,那么必须引入在scripts文件夹中的shBrushJava.js

<script type="text/javascript" src="scripts/shBrushJava.js"></script>

3.引入高亮显示的主题CSS,默认的为shThemeDefault.css

<link rel="stylesheet" href="styles/shThemeDefault.css" />

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

<pre class="brush: javascript;">
	var myCustomFn = function ShowFn() {
		Ext.Msg.alert('消息框', "你调用了客户端的JavaScript函数");
	}
</pre>

5.调用 SyntaxHighlighter.all() 开始解析<pre />或<script />节点

<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

6.SyntaxHighlighter自动识别并加载脚本语言

SyntaxHighlighter插件默认是每种编程语言加载对应JS语言库,那么如何实现SyntaxHighlighter自动加载不同语言的JS语言库,官方已经给出了解决方案 shAutoloader.js 自动加载库;

function HighLine() {
	SyntaxHighlighter.autoloader(
	['applescript', 'scripts/shBrushAppleScript.js'],
	['actionscript3', 'as3', 'scripts/shBrushAS3.js'],
	['bash', 'shell', 'scripts/shBrushBash.js'],
	['coldfusion', 'cf', 'scripts/shBrushColdFusion.js'],
	['cpp', 'c', 'scripts/shBrushCpp.js'],
	['c#', 'c-sharp', 'csharp', 'scripts/shBrushCSharp.js'],
	['css', 'scripts/shBrushCss.js'],
	['delphi', 'pascal', 'scripts/shBrushDelphi.js'],
	['diff', 'patch', 'pas', 'scripts/shBrushDiff.js'],
	['erl', 'erlang', 'scripts/shBrushErlang.js'],
	['groovy', 'scripts/shBrushGroovy.js'],
	['java', 'scripts/shBrushJava.js'],
	['jfx', 'javafx', 'scripts/shBrushJavaFX.js'],
	['js', 'jscript', 'javascript', 'scripts/shBrushJScript.js'],
	['perl', 'pl', 'scripts/shBrushPerl.js'],
	['php', 'scripts/shBrushPhp.js'],
	['text', 'plain', 'scripts/shBrushPlain.js'],
	['ps', 'powershell', 'scripts/shBrushPowerShell.js'],
	['py', 'python', 'scripts/shBrushPython.js'],
	['ruby', 'rails', 'ror', 'rb', 'scripts/shBrushRuby.js'],
	['sass', 'scss', 'scripts/shBrushSass.js'],
	['scala', 'scripts/shBrushScala.js'],
	['sql', 'scripts/shBrushSql.js'],
	['vb', 'vbnet', 'scripts/shBrushVb.js'],
	['xml', 'xhtml', 'xslt', 'html', 'scripts/shBrushXml.js']
	);
	SyntaxHighlighter.all();
}

7.SyntaxHighlighter显示中文描述

SyntaxHighlighter.config.strings = {
	expandSource : '展开代码',
	viewSource : '查看代码',
	copyToClipboard : '复制代码',
	copyToClipboardConfirmation : '代码复制成功',
	print : '打印',
	help: '?',
	alert: '语法高亮\n\n',
	noBrush: '不能找到刷子: ',
	brushNotHtmlScript: '刷子没有配置html-script选项',
	aboutDialog: '<div></div>'
};

通过以上的例子,我们发现使用SyntaxHighlighter这个插件并不难,只是加载JS与CSS文件即可,并不需要复杂的安装。

打赏

您看完此文章的心情是

  • 0人

  • 鼓掌

    0人

  • 草泥马

    0人

  • 愤怒

    0人

  • 鄙视

    0人

评论

    暂无评论...