jQueryを使ってgoogle-code-prettifyを自動的に適用してみた

MENTAを追いかけ始めてからPerlだけじゃなく、Web開発に関して色々と資料を読んでいる。
資料といっても、はてなブックマークの注目エントリーや人気エントリーを中心にあれこれと読んでいるだけだが。
その中で、JavaScriptのライブラリとして最近ホットなのがjQueryだ。
それはそれとして、先ほどのエントリーで参照した先のソースを見てみると、preタグにもcodeタグにも「prettyprint」が書いてなかった。
不思議に思ってソースを見てみると、prettyfy.jsを読んだ後に別のスクリプトを読んでいて、その中でどうやらクラス名を操作して、その後にprettyPrint()している事がわかった。
それと同じ事をjQueryでやってみよう、と思ってやってみた。
書いた場所は、テンプレートのフッター。
先ほどのスクリプトを読み込んだ後にjQueryを読み込んで、さらにその後にクラス名を変更するコードを書いた。
このブログでは、コードはpreの後にcodeで括っているので、その条件にあったタグにクラス名を設定することにした。
そのあたりのコードは「続き」で。

1
2
3
4
5
6
7
8


<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('pre code').addClass("prettyprint");
  prettyPrint();
});
</script>

ちなみに。
JavaScriptのライブラリについては、ネット全体でのキャッシュ効果を期待して、googleの「The AJAX Libraries API」を使っている。
prettifyについては微妙だが、参考にしたサイトでもやっていたのでのってみた。