BloggerにおけるSyntaxHighlighter Ver.3.x

以前SyntaxHighlighterをBloggerに適用したメモを公開していました。その記事へのリファーが非常に多いらしいのと、SyntaxHighlighter自体がバージョンアップしてきているため、カスタマイズを含めて最適化したメモを再掲載することにします。

前回の記事ではテンプレートのhtml自体に手を加えてしまっていたため、テンプレートを変更するともう一度設定し直さなければならないというデメリットがありました。今回の方法ではJavascriptウィジェットとして適用しますので、テンプレートを変更してもhtmlを編集する必要がありません(^^)。

また、前回の記事ではいろいろ端折ったところがあったため、適用方法に誤解が生じていたところがあったようです(htmlの編集方法がわかりづらかったことや、</head>の直前でなくても良いのですが、直前に配置しなければならないかのように捉えられていたこと)。今回はそのようなことがないようにより詳細な手順を記載したいと思います。

1. セットアップ編
はじめに、レイアウトを変更する必要があります。ダッシュボードのメニューからレイアウトを選択し、

「ガジェットを追加」を選択し、

ガジェットの種類として「HTML/Javascript」を指定します。

ガジェット名は何でも良いのですが、ここでは「SyntaxHighlighter」とし、中身に次のコードを指定します。 ここで指定しなければならないものは、ブラシです。ページロードの速度も考慮しつつ、使用している言語のshBrush***.jsを読み込むように、コメントアウトエリアから外して下さい。 また、テーマをひとつ選択することができます。どのような色合いになるかは、こちらのページにて比較することが可能です。 最後にこのガジェットをなるべくページのはじめのほうに配置します。

2. 投稿編(以前と同じ)
コードを含む投稿をする際に、

<pre class='brush: ***'>
コードの内容(エスケープ済)
</pre>

もしくは

<script type='syntaxhighlighter' class='brush: ***'><![CDATA[
コードの内容(エスケープ不要)
]]></script>

のように記載します。"***"はコードの言語名を書きます。'python'や'html'などです。どの言語が使用できるかは、ココに列挙されています。Brush aliasesの値を指定します。

なお、今回の記事でも最新版に対応しきれていないところがあります。

• 最新コードはgitHubにあるが、そこからのコード取得ができていない。
• Ver.3のフィーチャーである、autoloaderが適用できていない。
• Google Chromeでアクセスした場合、トップページでSyntaxHighlighterが適用されないことがある。

いくつか問題があるのですが、もしスマートに解決できたかたがいらっしゃいましたらお知らせください m(_ _)m