[Blogger] Syntax Highlighter V3 を導入する

このブログでは Source コードを載せることが多いのだが、 キーワードのハイライトができる Script があったので導入してみる。

• Syntax Highlighter

Blogger に導入する際に参考にしたのはこちら。

• How to Add Syntax Highlighter(v3) to Blogger Blogs

このページで 「 GENERATE SCRIPTS 」をすると、Blogger 用のスクリプトが生成されるので、 Blogger の HTML の編集で「 </head> 」タグの直前に貼り付ける。

今、貼り付けているコードはこんな感じ。

<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/shThemeMidnight.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/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/shBrushPlain.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/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

「 shThemeMidnight.css 」のところは使うテーマによって変わる。ファイル名の形式は「 shTheme<テーマ名>.css」。テーマは以下で Preview できる。

• Syntax Highlighter(v3) Themes Demo

ハイライトする言語ごとに必要な JavaScript ファイルをロードする。
上の例では、 JavaScript, Java, PlainText, Scala, Xml(HTML) をロードしている。
使える言語と、記事中で指定する言語Alias、ロードするファイル名の一覧は、

• SyntaxHighlighter - Bundled Brushes

に一覧されている。

---

記事の中で Syntax Highlighter を使うには、

<pre class="brush: html">
[ ここに ハイライトされるコードを書く ]
</pre>

を挿入する。
コード中の 「 < 」、「 > 」などは実体参照でエンコードする必要がある。 エンコードしないでも動いていたりするが、HTML 的に気持ち悪いし、本家でもエンコードしろと書いてあるのでエンコードして貼り付けている。

他にも、script タグ ＋ CDATA で書く方法もあり、エンコードが不要などメリットもあるのだが、記事の内容が Script の一部として記載されるのはさすがに気持ち悪いので pre 方式を採用。
具体的な方法は、

• SyntaxHighlighter - Installation

を参照。