SyntaxHighlighter 3.0.83使用筆記_javascript技巧

1、下載

    SyntaxHighlighter 3.0.83 : http://alexgorbatchev.com/SyntaxHighlighter

2、設定

    (1) SyntaxHighlighter解析的預設標籤，預設為pre

複製程式碼 程式碼如下:

SyntaxHighlighter.config.tagName="div";

    (2) 移除HTML換行標記
        如果您的軟體會在每行末端新增 標記，此選項可讓您忽略這些標記。
        shCore.js中實作程式碼為：

複製程式碼 程式碼如下:

        if (sh.config.stripBrs == true)
            str = str.replace(br, '');
SyntaxHighlighter.config.stripBrs=true;

    (3) 不顯示工具條

複製程式碼 程式碼如下:

SyntaxHighlighter.defaults['toolbar'] = false;

3、程式碼中使用

3.1 brush為必選項，其餘為可選：

複製程式碼 程式碼如下:

some java code

brush取值：java/xml/sql/c/js/css等，詳見：http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3.2 著色呼叫:

複製程式碼 程式碼如下:

    SyntaxHighlighter.highlight();

    或

複製程式碼 程式碼如下:

    SyntaxHighlighter.all();

all()與highlight()差別在於all()是註冊到onload()事件中的。

4、在部落格園使用

    部落格園預設支援SyntaxHighlighter。程式碼修改預設值（因為jQuery不支援設定!important的樣式所以需要設定cssText）：

複製程式碼 程式碼如下:

    var sh = $(".syntaxhighlighter");
    var code = sh.find("code");
    var line = sh.find(".line");
    var caption = sh.find("table caption");
    sh.css("cssText", "width: auto !important");
    code.add(line)
            .add(caption)
            .css("cssText", "font-size: 20px !important;white-space: nowrap !important;line-height: 1.5em !important;");
;

以上就是本文的全部內容了，小夥伴們對SyntaxHighlighter的使用方法是否有了新的認識呢，希望大家能夠喜歡本文。