JUGEMでgoogle-code-prettifyを使う

JavaScriptを使ったシンタックスハイライト自体は

highlight.jsとか、
SyntaxHighlighterとか、

まあ、探すと結構あちこちにあったのですが、何故か全てダメorz

使えてるっていう報告のページもあちこちにあったのですが、外部からJavascriptを呼び出したりしていたため、面倒なのでボツにしました。

最終的に使えると判断したのが、google-code-prettifyでした。
ただ、そのままでは使えないので、色々と作業が必要でした。

１．まずはダウンロード(そりゃそうだ)

google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hostingから、
Downloadをクリック→prettify-small-なんちゃらかんちゃら.tar.bz2(なんちゃらかんちゃらには年、月)をダウンロード
自分の場合はprettify-small-4-Mar-2013.tar.bz2でした。

２．解凍(当然)

ただし、面倒なことに拡張子がtarでbz2なのです。
自分の環境はLinuxなので特に問題ないのですが(tarコマンドでも使う)、窓とかの場合はLhaplus(ちょっと古いが)とかを使うと良いと思います。

３．中身の確認

今回使うファイルは解凍してできたフォルダの中に入っている
run_prettify.js
prettify.css
です。

４．run_prettify.jsの編集

そのままでは¥(半角バックスラッシュ、半角円マーク)に関するsyntax errorが出てしまうので、
¥を¥¥で置換します。

５．コピペ

JUGEMのHTMLとかCSSをそのままいぢくってもなかなか良い結果にはなるとは思いますが、
後でHTMLとかCSSをいぢって独自のスキンにする時に地獄を見そうな気がしたので、
そのままコピペではなく、フリースペースを使いました。
JUGEMの管理画面にある
デザイン→▼サイドバー編集→フリースペース
から、フリースペースの5番を選択、編集します。
で、フリースペースの「内容」に、

<script type="text/javascript">
<!--//
// 編集したrun_prettify.jsの中身をここにコピーする
// (中略)-->
</script>
<style type="text/css">
<!--
/* prettify.cssの中身をここにコピーする */
/* (中略) */
-->
</style>

を貼り付けます。
で、公開する設定にして保存。

６．JavaScript/CSSを反映させるための設定

このままではページの最下部にフリースペースの5番が行ってしまい、反映されません。
そこで、HTMLを編集し、先ほどのフリースペースをheadタグの中にぶち込みます。
JUGEMの管理画面にある
デザイン→HTML・CSS編集
を選択し、HTML編集フォームから、

<!-- BEGIN freespace5 -->
<h3>{freespace_title5}
</h3><div class="footer_contents">
{freespace_contents5}
</div>
<!-- END freespace5 -->

と書いてあるところを探します。見つけたらそこを切り取ってください。
そして、次に、
</head>
と書いてあるところを探します。
そして、その直前にペーストします。
さらに、
<h3>{freespace_title5}</h3>
<div class="footer_contents">
と
</div>
を削除して、

<!-- BEGIN freespace5 -->
{freespace_contents5}
<!-- END freespace5 -->

が
</head>の直前に来ていれば完成です。
&ltpre class="prettyprint"><code>～</code></pre>にコードを書き込んでみて、下の例のようになればOKです。
お疲れ様でした。


※なお、変に広い改行スペースになってしまうため、記事の自動改行は無効にした方が良さそうです。
※また、自分の環境ではコード部に行番号を入れる設定に(classにlinenumsを追加)すると、行番号がズレてしまったので、cssの設定でclassがlinenumのやつにpadding-right:10px;の設定を入れてます。