Violet

Just another Jekyll blog.

为 DlHighlight 的 Helpers 增加行数

今天下午在寻找一些合适的代码高亮 JS 插件,发现有几款挺不错的。于是下了下来看源代 码,折腾折腾了。

找到一个叫DlHighlight 的,目前只提供 XML ,XHTML ,JS ,CSS 4 种 语法高亮,感觉特别合适我。大爱啊。其生成方式也比较喜欢,通过载入 JS 来修改代码的 高亮形式。

只是, 一来发现其代码高亮的色彩搭配不是很喜欢,二来发现其提供了一个可以直接在 domReady 的时候调用的辅助函数不是很完美,遂修改之。

主要修改的地方是让代码的行数显得更佳容易调控。通过置入开关 true 和 false 来实现 ,好简单丫。

修改点,为 highlightByName 函数增加 switch 即可;

highlightByName: function(name, tag, args, switch) {
    if(!switch)
        switch = false;
    if(!args)
        args = {};
    if(!tag)
        tag = "pre";
    var a = document.getElementsByTagName(tag);
    for (var i = a.length; --i >= 0;) {
        var el = a[i];
        if (el.getAttribute("name") == name) {
            var code = el._msh_text || getText(el);
            el._msh_text = code;
            args.leng = el.msh_type || el.className;
            el._msh_type = args.lang;
            args.lineNumbers = switch;
            var hl = new DlHighlight(args);
            code = hl.doItNow(code);
            if(DlHighlight.is_ie) {
                var div = document.createElement("div");
                div.innerHTML = "<pre>" + code + "</pre>";
                while (div.firstChild)
                    el.appendChild(div.firstChild);
            } else
                el.innerHTML = code;
            el.className = "DlHighlight" + el.className;
        }
    }
}

OK,修改好之后,就可以这样来调用了:

window.onload = function() {
    //最后一个参数 true 为打开行数,false 为关闭
    DlHighlight.HELPERS.highlighting('fooname', 'pre', '', true);
}