livedoor ブログでソースコード部分を見やすくするため google-code-prettify を導入することにしたので、そのときのメモ。

ブログの管理画面から [ブログ設定] を選び、 [デザイン / ブログパーツ設定] の [カスタムJS] を選ぶ。

そして、[head 内] に以下を追記して、[保存]する。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

skin gallaryのスキンを使う場合は以下のようにパラメータを追加する。skin に指定する名前は全部小文字にすること。 
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sons-of-obsidian"></script>

以上で準備は完了。

実際に記事を書くときは、以下のようにソースコードを pre タグで囲み、class 属性に prettyprint を指定するだけ。ソースコードの内容から言語を判別し、自動的に見やすく装飾してくれる。
<pre class="prettyprint">
　：
ここにソースコード
　：
</pre>

もし、見た目がskin gallaryと違う場合は、使っているテンプレートの css が影響しているので、pre タグを確認する。

ブログの管理画面から [ブログ設定] を選び、 [デザイン / ブログパーツ設定] の [PC] 、[カスタム]を選ぶ。 そうすると css を編集することができるので、pre で検索し、背景色などが設定してあればコメントにすればよい。

また、ついでに pre タグに 「overflow: auto;」を追加しておくと、ソースコードが横長になったとき自動的にスクロールバーを出してくれる。

以上。