Google Code Prettifyのローダースクリプトを書き直した

単にDOMContentLoadedGoogle Code PrettifyprettyPrint()を呼んでただけだったのをゴニョゴニョするようにした。将来性とマークアップのしやすさのためにpre要素にprettyprintというクラスを指定しないように方針変更したので、それに合わせてcode[class*=language-]な要素を探してその親がpreだったらprettyprintを追加し、その後でprettyPrint()を走らせるという感じ。一応サポートしている言語もチェックしたりとかもするようにした。Rainbow移行への布石。

同じブラウザーかつ同じバージョンならdocument.querySelectorAll()におけるセレクターとCSSにおけるセレクターは完全にサポート状況が同じとみなして良いのかわからない。頑張ってググりたい。

language-fooをクラスに持つcode要素を表現するセレクターはcode[class|=language]とかでいけるかと思ったけど、そういう使い方するものではなかったしダメだった。空白区切りで複数の値を取れるプロパティーではそれぞれの値の先頭にマッチするようなセレクターが欲しい。いやいらないです。

サポートしている言語かそうでないかはごく簡単にチェック。

var languages = ["bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm",
  "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
  "xhtml", "xml", "xsl", "css", "scss", "vim"],
  reLanguage = new RegExp("\\blanguage-(" + languages.join("|") + ")\\b");

追加しづらそう……。Google Code PrettifyのlangHandlerRegistryを参照するかlangHandlerForExtension()パクった方が良さそう。むしろ頑張ってハイライトしようとするフォールバックの部分なくしちゃえばいいのかなー。


視認しつつマークアップの修正をしなければならなかったのでVimのキーボードマクロでだいたい誤魔化した。普段はqに誤爆するとうっとうしいけど、使う時はコマンドラインにでるrecordingというメッセージがすごく可愛く見える。多分結構な数のエントリーでおかしくなってそう。気づいたら直す。

あとRainbowに僕の書いた<code class="language-php">とかに対応するコードが取り込まれたのでdata-languageへ書きなおさなくても使えるようになった。作者のさじ加減で消えかねないのでマークアップにこだわりがないなら素直に併記した方が良さそう。