bloggerでシンタックスハイライト

今後意欲的にブログを書こうかと思うけど、下準備として細かい懸念点を解決しておきたい。

まずは、ソースコードやコマンドをシンタックスで色分けして表示したい。

こういうの

bloggerの基本機能ではもちろんそのようなものは見つからなかったので、調べました。
そして解決まで苦労したのでメモしておくことにします。

よしけんActivity: まずBloggerにSyntax Highlighter 3.0を適用してみる
など参考にさせてもらいました。

仕組みとしては、指定されたタグの中をJavaScriptで解析してクラス定義し、テーマとして用意したcssで色付けされているような感じ。jsファイルなどは外部サイトを直接参照することになるので、特にダウンロードなど必要ありません。テンプレートに読み込み指定のタグをちょちょいと書いておけばいいだけ。

ここからテンプレートのheadタグに埋め込むhtmlソースコードを取得します。
GENERATE SCRIPTSっていうボタンからジェネレータに飛んで以下の通りに取得してください。

1. 乱暴ですけどテーマと必要な言語を全て選び 
2. Copy To ClipBoardボタンを押してクリップボードにコピーしておきます。

次にテンプレートの編集です。

1. bloggerの設定画面のテンプレートから「HTMLの編集」をクリック
2. なんか言われるけど続行
   
3. headタグを検索して、閉じる直前にコピーしておいたコードをペースト！

これで設定完了。ブログのHTMLソースを開いて、preタグを以下のようにclass指定しながら使うとハイライティングしてくれます。

<pre class="brush: python" title="Python大好き" >

pythonのコードを表示すると以下の通り。

#!/usr/bin/env python
# coding:utf-8

"""
サンプルソースコードだよ
"""

import os

for name in os.listdir("./"):
    if not os.path.isdir(name):
        continue
    if not os.path.isfile(u"%s/%s.txt" % (name, name)):
        continue

    cmd = u"ls"
    print cmd
    os.system(cmd)

# EOF

せっかくだからテンプレートに加えるタグの解説も入れておこう。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

というような構成になっているので、自分で対応言語を増やしたい場合にも対応しやすい。なかなかいい構成。
以上。