改寫 dp.SyntaxHighlighter 中 CSS 的 Highlighter 方式

最近掙扎了很久，考慮要不要用 dp.SyntaxHighlighter 來處理 Blog 中程式碼的 Highlighter，因為之前用的 Iris Syntax Highlighter 已經收起來了，而且在文章撰寫上十分不方便也不直覺，所以花了一點心思改成 dp.SyntaxHighlighter 的模式，但 1.5.1 版還蠻陽春的，花了一點時間做語法增強及檔案瘦身，希望這個套件可以用久一點。

原本 dp.SyntaxHighlighter 中 CSS 的 Highlighter 是用 keyword 的方式去處理的，未定義的 keyword 將不會有 Highlighter，為了得到更好的效果，又必須增加更多的 keyword，實在是很不划算。

所以我改用解析 Syntax 結構的方式去處理 Highlighter 的動作，雖然還不是很完整，但整體的效果比原生好多了。

/**=[ CSS ]===========================================*/
dp.sh.Brushes.CSS = function(){
    // 樣式定義
    this.CssClass = 'dp-css';
    this.Style = '.dp-css .value{color:blue;}' +
                  '.dp-css .important{color:red;font-weight:bold;}'+
                  '.dp-css .keyword{color:#7F0055;font-weight:bold;}'+
                  '.dp-css .func{color:#F55;font-weight:normal;}';
};

dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.CSS.Aliases   = ['css'];

dp.sh.Brushes.CSS.prototype.ProcessRegexList = function(){
    function push(array, value){
        array[array.length] = value;
    }
    var match1,match2,regex1,regex2;
    
    /* 加入註解解析 */
    this.GetMatches(dp.sh.RegexLib.MultiLineCComments, 'comments');
    /* 加入 !important 解析 */
    this.GetMatches(new RegExp('!important', 'g'),'important');

    /* 解析屬性區塊 */
    // 匹配 '{' 至 '}' 之間的文字
    regex1 = new RegExp('\{[^}]+\}', 'gm');
    // 匹配 'xxx:xxx[;\n\(!]' 格式的文字
    regex2 = new RegExp('([:\\w-\.]+)\\s*:\\s*([^;\n\(!]+)[;\n\(!]', 'gm');
    while((match1 = regex1.exec(this.code))){
        while((match2 = regex2.exec(match1[0]))){
            if(!match2[1]){continue;}
            // 匹配屬性名稱
            push(this.matches, new dp.sh.Match(
                match2[1], 
                match1.index+match2.index, 
                'func'
            ));
        
            // 匹配屬性值
            if(match2[2]){
                push(this.matches,new dp.sh.Match(
                    match2[2], 
                    match1.index+match2.index+match2[0].indexOf(match2[2]), 
                    'value'
                ));
            }
        }
    }
  
    /* 解析選擇器區塊 */
    // 匹配 'xxx[,\{\n]' 格式的文字
    regex1 = new RegExp('^([\\s\\w\.#*:+-]+)[,\{\n]', 'gm');
    while((match1 = regex1.exec(this.code))){
        if(!match1[1]){continue;}
        push(this.matches, new dp.sh.Match(
            match1[1], 
            match1.index, 
            'keyword'
        ));
    }
};

效果可察看之前的文章：
IE6 對 visibility 負荷過大的問題[CSS]
IE6 中的最大最小寬度和高度
CSS fixed 定位( FF / IE6 )
利用 !important 修正 IE 與 Firefox 的差異