以下の記事は古い内容になります。
現在は,google-code-prettify を使用しています。
参考サイト:
http://jutememo.blogspot.jp/2008/01/blogger.html
blogger でソースコードをハイライトして表示させるにはどうしたら良いのか調べてみたところ,SyntaxHighlighter を利用すればよいみたい。 実際に導入してみると,以下のように表示できるようになります。
public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } }
では,設定の方法をメモ。
まずは blogger のデザイン編集で,「HTMLの編集」を選択。ここで,<head>内に以下の内容を記述します(自分は閉じタグの直前に追記しました)。<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/> <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 type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>上記の shBrushJava.js の Java を他の言語に置き換えて追記していけば,その言語のハイライトが可能になります。設定可能な言語については,http://alexgorbatchev.com/SyntaxHighlighter/hosting.html を参照してください。ちなみに,ソースコードのどこでもよいからダブルクリックすると,全選択されるようになっています。
以上のように設定したのち,preタグで次のように書くと,冒頭に挙げたソースコードのハイライトが表示されるようになります。言語の指定は,「brush: xxx;」のxxxに記述すればOK。「toolbar: false;」というのはハイライトされている領域に表示されるツールバーを消すための設定です。ライブラリを提供しているサイトのドキュメントによると,他に設定できるものとしては,開始行番号を1以外にしたり,特に目立たせたい行を強調表示したりもできるようです。
<pre class="brush: java; toolbar: false;"> public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } } </pre>
参考にしたサイト:
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
ブログ作成中: Blogger に SyntaxHighlighter 2 をインストールする
http://b.blavv.net/2009/06/bloggersyntaxhighlighter-2.html