如何扩展SyntaxHighlighter
在做这个工作之前,你需要对JavaScript有比较深入的了解,尤其需要熟悉正则表达式。如果网络已经存在你需要拓展的加亮库,那就不用自己搞了,直接选用。另外,如果你需要拓展的语言跟已经存在的加亮库类似,那么可以修改它。比如,C51是在C上扩展而成,所以我们可以选择修改shBrushCpp.js来获得C51的加亮库。
本文以新增一种语言为例。
新建一个js文件,并定义一个SyntaxHighlighter.brushes对象。
例如:
SyntaxHighlighter.brushes.Custom = function()
{
};
SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();
Custom为扩展的语言,可取其他名字。
下面是最关键的部分,你需要建立自己的匹配规则,也就是在regexList定义段写入一些匹配规则,具体怎么搞就需要一些正则技巧了。
例如:
SyntaxHighlighter.brushes.Custom = function()
{
var funcs = 'abs avg case cast';
var keywords = 'absolute action add';
var operators = 'all and any between cross';
this.regexList = [
{ regex: /--(.*)$/gm, css: 'comments' },
{ regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' },
{ regex: new RegExp(this.getKeywords(funcs), 'gmi'), css: 'color2' },
{ regex: new RegExp(this.getKeywords(operators), 'gmi'), css: 'color1' },
{ regex: new RegExp(this.getKeywords(keywords), 'gmi'), css: 'keyword' }
];
};
SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();
最后,可以定义一些别名,用于调用。
SyntaxHighlighter.brushes.Custom = function()
{
...
};
SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Custom.aliases = ['custom', 'ctm', 'ct'];
也就是说调用的时候custom,ctm,ct将被视为同一种。
SyntaxHighlighter 使用
<pre class="brush: custom">
...此处插入代码
</pre>
参考资料:Developing a custom brush
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes:Custom