ブログでコードをシンタックス表示する準備

ブログにコードを載せる時に、
エディタ表示しているような色付きシンタックス表示して、
見やすくするための準備をした。

JavaScriptで色付き表示させるみたいで、
調べるとまずでてくるのが、
SyntaxHighlighterってやつ。
これを導入しようとしてみようかと調べてみたが、
Bloggerに導入するにはAuto-Loaderに対応していないといけないんだけど、
そこら辺がメンテされていないのか、不具合がありそうなのでやめた。

次に出てきた候補は、Googleのcode-prettify。
Googleが公開しているものなら、
Bloggerで使えないって事はないだろーなとこれを導入する事に。

http://usagisaigon.blogspot.jp/2013/08/blogger-google-code-prettify.html
を参考にしつつ、

Google code-prettifyのgit-hubリポジトリが最新の記述だろって事で、
Setupのページを見ながら設定。
https://github.com/google/code-prettify

テンプレート → HTMLの編集とたどって、
</head>の手前に

<!-- google-code-prettify -->
<script src=\"https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?&amp;skin=sunburst\"></script>

を記入

skin=○○○の部分に関しては、
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html
から好きなスタイルを選ぶ。

デフォルトのままでは行番号を表示した時に5行ごとにしか番号が表示されないので、
</script>の次の行に

<style>li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }</style>

を追記。

実際にコードを記入する時は、

<pre class="prettyprint">
</pre>

でコードを囲ってあげる。

行番号を表示させる時は、

<pre class="prettyprint linenums">

言語を指定するときは、

<pre class="prettyprint lang-python">

とか、lang-python部分を変えてあげれば指定出来る。