2013年10月4日金曜日

Bloggerでソースコードを綺麗に表示する方法

これからブログにコードを書く機会が増えると思うので、コードを綺麗に表示したいと思います。

ブログでシンタックスハイライトするための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でも書き方は同じです。