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のファイル、
- https://nullpon.moe/dev/sample/google-code-prettify/prettify.js
- https://nullpon.moe/dev/sample/google-code-prettify/prettify.css
をロードする。読み込みが完了したら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では動かない。
追記
ファイルが無くなっていたので再度アップした。