google-code-prettifyでどこでもシンタックスハイライト

google-code-prettifyというスバラシイJavaScriptライブラリがあることを知った。HTML上に書かれたサンプルコードをシンタックスハイライト表示するJavaScriptライブラリ。Pure JavaScriptということはブックマークレット化できるんじゃないですか??
試しに作ってみた。

javascript:(function(){var%20a=top.document.createElement("script");a.type="text/javascript";a.charset="UTF-8";a.src="//nullpon.moe/dev/sample/google-code-prettify/loadPrettify.js";var%20h=window.top.document.getElementsByTagName("head")[0];h.appendChild(a);})();

ブックマークレットを実行すると、まず、


をロードする。その中でさらにgoogle-code-prettifyのファイル、

をロードする。読み込みが完了したらpre要素を探し、class属性にprettyprintを設定してハイライト対象にする。最後にprettyPrint関数を呼び出してシンタックスハイライトする。
スクリプトファイルのロードは非同期で行われるので、prettify.jsの読み込みの完了を待つ必要があるようだ。読み込み待ちはこちらを参考に行った。この方法は最速の中の人のオリジナルらしいけど、最速さんのサイトでは対象のページが見つからなかった。
以下はloadPrettify.jsのコード。色付くかな〜?

var h=window.top.document.getElementsByTagName("head")[0];
var s=window.top.document.createElement("script");
s.type="text/javascript";
s.charset="UTF-8";
s.src="//nullpon.moe/js/google-code-prettify/prettify.js";
var l=top.document.createElement("link");
l.rel="stylesheet";
l.type="text/css";
l.charset="UTF-8";
l.href="//nullpon.moe/js/google-code-prettify/prettify.css";
h.appendChild(s);
h.appendChild(l);

function doSyncPrettify() {
    if (window.prettyPrint) {
        var pre = document.getElementsByTagName("pre");
        for (var i = 0; i < pre.length; i++) {
            var t = "prettyprint"
            //var c = pre[i].getAttribute("class");
            //if (c) { t += " ";t += c }
            pre[i].setAttribute("class",t);
        }
        prettyPrint();
    } else {
        setTimeout(doSyncPrettify, 100);
        //console.log("wait...")
    }
}
doSyncPrettify();

色々問題ありそうだが、一応動作するようだ。setAttribute("class", hoge)を使っているのでIEでは動かない。

追記

ファイルが無くなっていたので再度アップした。