SyntaxHighlighterでCSS3とベンダープレフィックスに対応する

私はWordPressでソースコードを表示するのにSyntaxHighlighter Evolvedを使っています。

ふとCSSのコードを書いた時、inline-blockやtransitionがハイライトされなかったんです。
色々試してみたら-moz-や-webkit-も対応していないようです。
どうやらSyntaxHighlighter自体、CSS3やベンダープレフィックスには対応してないみたいですね。
そこでソースコードをいじって無理やり対応してみました。
ゴリ押しではないので今後CSSのプロパティが増えたとしても大丈夫なようになっています。

編集するのはshBrushCss.jsというファイルになります。
これはSyntaxHighlighter Evolvedでいうとそのファイルのパスは次のようになります。

wp-content/plugins/syntaxHighlighter/syntaxhighlighter2 または 3/scripts/

このファイルの中身をほとんど書き変えてしまいますので、念のためバックアップをとっておきましょう。

書き換えるのはファイルの30行目から始まる

SyntaxHighlighter.brushes.CSS = function(){...}

の中括弧の中身全部です。

ここを下記に書き換えて下さい。
中括弧の中身は下記で言うと3行目から最終行の1つ前までになります。

[javascript]SyntaxHighlighter.brushes.CSS = function()
{
function addCSS(match, regexInfo) {
var regex = '',
addClass = '';

if(regexInfo.type == 'valuesCSS') {
regex = '(:)(?<name>.+)(;|!)';
addClass = 'value';
} else if(regexInfo.type == 'keywordsCSS') {
regex = '(?<name>[a-z_-]+)';
addClass = 'keyword';
}

var constructor = SyntaxHighlighter.Match,
code = match[0],
tag = new XRegExp(regex, 'xg').exec(code),
result = [];

if (tag != null)
result.push(new constructor(tag.name, match.index + tag[0].indexOf(tag.name), addClass));

return result;
}

this.regexList = [
{ regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' },
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string_d' },
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' },
{ regex: /!important/g, css: 'color3' },
{ regex: new XRegExp('([a-z_-]+)(?=:)(?!.+{)', 'gm'), func: addCSS, type:'keywordsCSS' },
{ regex: new XRegExp('(?=:)(?!.+{)(.+)(!)|(?=:)(?!.+{)(.+)(;)', 'g'), func: addCSS, type:'valuesCSS' },
];

this.forHtmlScript({
left: /(<|<)\s*style.*?(>|>)/gi,
right: /(<|<)\/\s*style\s*(>|>)/gi
});
};[/javascript]

こうすることで必要なところが全部ハイライトされるようになります。
中途半端にハイライトされる現状に不満であれば、書き換えてみてはいかがでしょうか。