Bloggerでコードを見栄えよく表示する方法

備忘録として残していくであろうプログラムなどのコードを見るときに

他のサイトやWebサービスのように見栄えよくBloggerでも表示できるのか探していたところ

コードスニペット用のgoogle-code-prettifyがありました。

最初はBloggerにあるかなと思い、小一時間探していました。

よくよく考えれば専用に必要なものは、自分で用意しないといけないですよね。反省。

google-code-prettifyを利用するときはGitHubにホスティングされているファイルを
読み込めば良いようです。
以前ホスティングされていたcode.google.comサイトは閉鎖となりプロジェクトは
GitHubに移行されています。そのため、これまで利用できていたURLは無くなるので
リンク先の変更が必要です。

準備

1.適用するブログ > レイアウトの「ガジェットを追加」から「HTML/JavaScript」を選択します。
2.「HTML/JavaScript」編集画面の「コンテンツ」に次のコードを埋め込んで保存します。

<!-- Google Code Prettify -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'></script>
<style>
li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }
pre.prettyprint{
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>

1行目のコメントは埋め込んだ位置を示すために書いています。
4行目は行番号を表示したときデフォルトでは、5行間隔しか行番号が表示されないので、
1行ごとに表示するように変更しています。
5行目～11行目は折り返し表示できるように変更しています。

ブログでコードを書くとき

「HTML」モードに切り替え、次のように書きます。

<pre class="prettyprint">
// 行番号を表示しない場合はpreのclassに"prettyprint"を指定
// コード
</pre>

<pre class="prettyprint linenums">
// 行番号を表示する場合はpreのclassに"prettyprint linenums"を指定
// コード
</pre>

コード内で"<"や">"を利用する場合は"&lt;", "&gt;"に置換する必要があります。
<pre>タグの部分だけ「HTML」モードで記述し、「作成」モードに切り替えてコードを
書き込めば"<"や">"の置換をする手間が省けると思います。
「作成」モードに切り替えると、コードを書き込む部分が分かりづらいので、<pre>タグ内に
目印となる文字を入れておけば、切り替えた後でも簡単に場所を見つけられると思います。