2012年11月24日土曜日

[Blogger] Syntax Highlighter V3 を導入する

このブログでは Source コードを載せることが多いのだが、 キーワードのハイライトができる Script があったので導入してみる。
Blogger に導入する際に参考にしたのはこちら。 このページで 「 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 できる。
ハイライトする言語ごとに必要な JavaScript ファイルをロードする。
上の例では、 JavaScript, Java, PlainText, Scala, Xml(HTML) をロードしている。
使える言語と、記事中で指定する言語Alias、ロードするファイル名の一覧は、 に一覧されている。



記事の中で Syntax Highlighter を使うには、
<pre class="brush: html">
[ ここに ハイライトされるコードを書く ]
</pre>
を挿入する。
コード中の 「 < 」、「 > 」などは実体参照でエンコードする必要がある。 エンコードしないでも動いていたりするが、HTML 的に気持ち悪いし、本家でもエンコードしろと書いてあるのでエンコードして貼り付けている。

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

0 件のコメント:

コメントを投稿