この記事の概要
- 投稿日:
- 2007年 12月 16日
- 投稿者:
- yu
- カテゴリー:
- Tips
- タグ:
- google Javascript ライブラリ Markdown
これをさくっとMarkdownなHTML出力に合わせてみたよ。というのをこっちに適用するのをうっかりわすれてた。
google-code-prettifyというのは、ソースコードを色分け表示してくれるJavascriptライブラリ。NP_HilightSourceのような処理をクライアントサイドでやってくれて便利。
google-code-prettify自体はREADME（英語）を見てもらえればわかるように使い方は単純なんですが、preタグかcodeタグにclass="prettyprint"をつけないといけないので、そこを自動的にjsで振ってくれるようにごにょごにょしてみました。
導入はカンタン。以下はその説明です。
まずは上記のgoogleのところからファイルをダウンロード。prettify.css と prettify.js をskinディレクトリ直下に置きます。直下に置いたのは、スキンを換えたときも適用しやすくするため。
スキンのheadタグ内に以下のコードを挿入。ここは上記ファイルの読み込み指示と、prettyPrepare()ファンクションの定義。これでMarkdownが生成する<pre><code>を<pre><code class="prettyprint">にらくちん自動変換。スキン直下は"../"という書き方でディレクトリ階層を一段上がればOK。
<!-- google-code-prettify -->
<link href="<%skinfile(../prettify.css)%>" rel="stylesheet" type="text/css"/>
<script src="<%skinfile(../prettify.js)%>" type="text/javascript"></script>
<script type="text/javascript">
function prettyPrepare() {
var o = document.getElementsByTagName("pre");
for (var i=0; i<o.length; i++) {
if (o[i].firstChild.tagName.toLowerCase() == "code") o[i].firstChild.className = "prettyprint";
}
}
</script>
あとはbodyタグを
<body onload="prettyPrepare();prettyPrint();">
にしてjsを呼び出すだけ。