Blogger SyntaxHighlighter を設定する

今回も Blogger ネタです。

前回の記事を書くために、SyntaxHighlighter の設定をしました。
SyntaxHighlighter はソースコードをカッコよく表示してくれます。

設定は前回のタイトル変更と同じく、管理画面の [テンプレート] から行います。

今回は、XML の表示だったため、以下の設定を追加しました。

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

4 行目が XML の設定です。
ほかの言語もいろいろ対応しています。
言語一覧は Bundled Brushes に載っています。

設定が完了したら、投稿画面の [HTML] モードで <pre> タグを入力して、その中にソースコードを書きます。

<pre class="brush: html">
</pre>

XML はエンティティ文字の変換がちょっと面倒です。
[作成] モードで表示したい XML を書いたあとに、[HTML] モードにして <pre> タグで囲むと編集が楽になります。
プレビュー画面で表示されないので出来上がりは公開してからチェックするしかないみたいです。

これからはプログラムもどんどん載せていこうと思います。


頑張りすぎず脱力系でいこうと思います。
以上。