プログラムのソースコードを綺麗に表示したいという願望はHTML+CSSでは限界がある。
ということで巷で噂?のSyntaxHighlighterをlivedoor-blogで使う方法をメモメモ。

何はともあれ結果から

Python
print "SyntaxHighlighterのテスト"
Java
public class SyntaxHighlighterSample {
	public static void main(String[] args) {
		System.out.println("SyntaxHighlighterのテスト");
	}
}

続いて設定手順

?SyntaxHighlighterをダウンロード&解凍
 現時点では最新バージョンは[2.0.296]
?livedoor-blogの有料プランに申し込む(笑)
 無料のプランだと画像なんかのファイルはアップロードできるものの、JavascriptやCSSなんかのファイルはアップロードできない。有料プランを使えばFTP接続できるようになるので、こういったファイルがアップロードできるようになる。
 たかだかブログごときに金なんぞ払えるかっていう人もいるかもしれないけど、一番安いPROなら262円/月。大した額でもない、携帯コンテンツのほうが高いくらいじゃないかと思う。
?FTPでブログのルートに解凍してできたsyntaxHighlighterフォルダを丸ごとアップロードする
?livedoor-blog管理画面の[カスタマイズ/管理]→[デザインのカスタマイズ]→[トップページ]、[個別記事ページ]で以下のように編集し、「デザインの反映」をする。
ちゃんと両方で設定しないとトップページではうまく表示されるのに、個別記事のページだとうまくいかないなんてことになるので気をつけよう。

<head>
・・・












<title><$BlogTitle ESCAPE$> - livedoor Blog(ブログ)</title>
</head>

以上で、基本的に設定は終わり。

使ってみよう

例えばPythonならこんな感じ。
<pre class="brush: py">
print "Hogehoge"
</pre>

preタグのclass属性に、表示したいソースコードのタイプを指定(今の例だとpython)して、preタグの中にソースコードを貼り付ければOK。

注意

・[投稿フォーム]の設定で「改行を反映する」にチェックが入ってると勝手にbrタグが挿入されてしまう
・preタグ内でhtml/xmlを表示させる場合「<」「>」なんかはちゃんと&lt;&gt;でエスケープしろって

やっぱり技術ネタやるからには見た目にもこだわりたいよね。