今後意欲的にブログを書こうかと思うけど、下準備として細かい懸念点を解決しておきたい。
まずは、ソースコードやコマンドをシンタックスで色分けして表示したい。
こういうの
bloggerの基本機能ではもちろんそのようなものは見つからなかったので、調べました。
そして解決まで苦労したのでメモしておくことにします。
よしけんActivity: まずBloggerにSyntax Highlighter 3.0を適用してみる
など参考にさせてもらいました。
仕組みとしては、指定されたタグの中をJavaScriptで解析してクラス定義し、テーマとして用意したcssで色付けされているような感じ。jsファイルなどは外部サイトを直接参照することになるので、特にダウンロードなど必要ありません。テンプレートに読み込み指定のタグをちょちょいと書いておけばいいだけ。
ここからテンプレートのheadタグに埋め込むhtmlソースコードを取得します。
GENERATE SCRIPTSっていうボタンからジェネレータに飛んで以下の通りに取得してください。
- 乱暴ですけどテーマと必要な言語を全て選び
- Copy To ClipBoardボタンを押してクリップボードにコピーしておきます。
次にテンプレートの編集です。
- bloggerの設定画面のテンプレートから「HTMLの編集」をクリック
- なんか言われるけど続行
- 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'/>
というような構成になっているので、自分で対応言語を増やしたい場合にも対応しやすい。なかなかいい構成。
以上。
