SyntaxHighlighter源码高亮插件的配置和运行机制

2014-08-31 10:48:55|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:JavaScript, HTML/CSS, 界面设计, Web|来源:唯设编程网

4. shAutiloader.js 脚本文件

4.1 概述

SyntaxHighlighter着色过程中,针对不同的语言需要根据适合的脚本刷子来着色,这样造成你在页面上不得不预先加载所有可能的用到的 brush.js 。 shAutiloader.js 正是为解决此问题而生,它会根据待着色代码块所使用到的笔刷配置来动态创建<script>节点以加载适合的JavaScript文件,不会造成载入多余资源的浪费。

使用方式:只需在页面中引入 shAutoloader.js 脚本文件,将所有笔刷在 autoloader 对象中配置好,再调用SyntaxHighlighter.all(params)方法。

注意:使用shAutiloader.js必须调用 SyntaxHighlighter.all(params) 来启用着色插件,shAutiloader.js内部重写了SyntaxHighlighter插件的 all(params) 方法,以此确保所有被使用到的笔刷都已经动态创建好 script 节点。

4.2 API解释

SyntaxHighlighter.autoloader(brushes)

brushes 参数是数组,格式如下:

Array: [ 'alias1 alias2 /full/path/to/brush.js', ... ]            一维数组,元素内部用空格分隔,最后一部分为 JavaScript 文件路径。

Array: [ [ 'alias1', 'alias2', '/full/path/to/brush.js' ], ... ]          多维数组,每一维的最后一个元素为JavaScript 文件路径。

示例:

SyntaxHighlighter.autoloader.apply(null, path(
'css /pub/sh/current/scripts/shBrushCss.js',
'actionscript3 as3 /pub/sh/current/scripts/shBrushAS3.js',
'c# c-sharp csharp /pub/sh/current/scripts/shBrushCSharp.js',
//…… 
));
SyntaxHighlighter.all();

到此,SyntaxHighlighter代码着色插件的一些内部实现原理和配置方法就介绍完了,但SyntaxHighlighter插件功能强大,还有很多实用功能等着大家去挖掘,欢迎大家继续补充!

本文参考:http://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.html

发表评论0条 】
网友评论(共?条评论)..
SyntaxHighlighter源码高亮插件的配置和运行机制