久しぶりに、新しいウィジェットを作成してみました。
参考にしたのはこちらです。

• すぐに忘れる脳みそのためのメモ: Blogger でソースコードに色付けをする - google-code-prettify
• Learning Log Book: Bloggerでシンタックス・ハイライト

今回のウィジェットは、ブログ内でコードを紹介するときに、自動的にハイライト表示するためのもの。Google の Code Prettify というツールを利用しています。Code Prettify で実際にどのようにコードが色分けされるのかは、デモページをご覧下さい。


導入方法

下の「Add to Blogger」をクリックすると、「ページ要素を追加」画面が開きます。ウィジェットを追加するブログを選択して、タイトルは空欄のまま、「ウィジェットを追加」ボタンを押してください。手順はこれだけです。

<style type="text/css"> @import "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"; </style> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script> <script type="text/javascript"> function prettify() { prettyPrint(); } if (window.addEventListener) { window.addEventListener("load", prettify, false); } else if (window.attachEvent) { window.attachEvent("onload", prettify); } else { window.onload = prettify; }</script>

利用方法

投稿内で、色分けの対象にしたいコードを

<pre class="prettyprint">
（コード）
</pre>

のように記述するだけ。

< や > をコードとして表示したい場合には、それぞれ <、> に書き換えてください。面倒だという人は、下の変換ツールをどうぞ。

変換したいコードを上のテキストエリアに入力し、「変換」ボタンを押すと、下のテキストエリアに変換された文字列が表示されます。

注意：　JavaScript をオンにしてご利用下さい。

ということで、ぜひぜひご利用くださーい。


関連：

• Blogger beta の Widget 追加ボタンの作り方