2011年11月28日月曜日

Bloggerにソースコードをきれいに載せる「SyntaxHighlighter」

Bloggerにソースコードを見やすくするツールの1つに「SyntaxHighlighter」があります.
というわけで,今回はこちらを導入します.

導入には以下のサイトを参考にしました.
Jump into! : BloggerにおけるSyntaxHighlighterの使い方

まず,以下のコードをBloggerのテンプレートに挿入します.


テンプレートのHTMLを編集するには,Bloggerの管理サイトにおいて,
  • 「デザイン」→「HTMLの編集」
を選択します.
ここで,HTMLタグの<head></head>の間に挿入します.
参考にしたサイトによると,</head>の直前が良いとのことです.
以上で準備は完了です.

次に,実際の利用方法です.
利用方法には以下の2種類があります.


この「***」には,何のプログラムであるのかを示す文字を入れる必要があります.
こちらは以下のサイトに記述してあるので参考にすると良いと思います.
SyntaxHighlighter - Bundled Brushes

また,エスケープ不要とありましたが,こちらを用いてJavaScriptのコードを挿入したところ,エラーが発生したので,どちらの場合でもエスケープを行ったほうが良いと思います.
使い方が悪いのかもしれませんが・・・

では,実際にソースコードを埋め込んでみます.
当然ですが,「投稿を編集」を行う際に,「HTMLの編集」を利用します.
しかし,こちらで編集しても「作成」の部分には反映されませんので,どのように表示されるかは「プレビュー」から確認します.
また,「作成」で編集したあとに「HTMLの編集」で確認して,表示したい位置にSyntaxHighlighterの構文があるのかを確認・編集する必要があります.

最後に,HTMLやJavaScriptのエスケープですが,こちらは「作成」で生のコードを入力すると,「HTMLの編集」にはエスケープ後のコードが表示されます.
そのため,こちらをSyntaxHighlighterの構文の間に挿入してやれば作業は完了です.