ブログでシンタックスハイライトするためのcssやjsを生成してくれるSyntaxHighlighterというサービスがあるので、そちらを利用します。
導入
1.テーマと言語を選択まず下記ページでテーマ(背景色や文字色)とハイライトしたい言語を選びます。
Generateボタンをクリックするとlinkタグとscriptタグが生成されます。
Syntax Highlighter Scripts Generator
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
テーマは下記ページで確認できる
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
2.生成されたタグをBloggerに設定
Bloggerの管理画面の左メニューから[テンプレート]-[HTMLの編集]を選択し、閉じheadタグの直前に1で生成したlinkタグとscriptタグをコピペします。
テンプレートを保存したら準備は完了です。
使い方
表示方法には2種類あります。
・preタグを使う
・scriptタグを使う
preタグを使う
・『<』や『"』などの文字ではエスケープしなくてはならない・javascriptが読み込まれなくてもテキストで表示してくれる
<pre class="brush: 言語;"> //ソースコードを記述 </pre>
scriptタグを使う
・特殊文字のエスケープは不要・javascriptが読み込まれないと何も表示されない
ここではエスケープ不要のscriptで例を記載していきます。
preでも書き方は同じです。