BloggerへのSyntax Highlighterの導入

Bloggerのポストはdefaultではcode syntaxをきれいに整形表示してくれる機能がないようです。これを後から追加するためには、以下のjavascriptのいずれかを利用すればいいようです。

• Google Code Prettify
• SyntaxHighlighter

それぞれのdemoを眺めてみて、後者の方が好みだったので今回はそちらを使います。

具体的なBloggerへの導入は、Web2Bloggingの解説ページがわかりやすいです。手順としては、

1. 上記解説ページのGeneratorでscriptを作成
2. scriptをbloggerのtemplateに埋め込む
3. codeつきのpostをしてみる

だけです。

まずはgeneratorでのscript作成。以下のようにTheme (見た目) をひとつ選んで、Brushes (syntax highlightさせたい言語のリスト) を選びます。Themeごとに表示がどのように変わるかはここを参照。

で、"Get Code"ボタンを押して出て来た文字列をcopyしておきます。

次はbloggerのtemplateへの埋め込み。自分のBlogger accountにloginした上で、右上からデザインの編集ページへ移動します。

左上のちょい下にあるボタンから"HTMLの編集"へ。HTMLの文章がずらっと並んでいる最後の"</head>"の直前に、さきほどcopyしておいたscriptをpaste、保存すれば準備は完了。

あとはcodeを含んだ文章をpostすればきれいに表示されます。
例えばこんなかんじ。

code部分は
<pre class="brush:language name;">
ほにゃらら
</pre>

と囲ってやります。記述するcodeにあわせ"language name"をpythonだったりc#だったり適当に変えるのと、ほにゃららはHTML文法からescapeさせる必要があるので、"<"などはそのまま書けない、という点だけ注意です。あ、それからものすごくしょうもないことですが、２つある編集モードのうち、code部分書くときは上記画像の例のように、"HTMLの編集"ってところを選択して書いてくださいね。でないとうまく表示されません。

結果例はこんな感じになります。

さわだ