Bloggerでソースコードの色づけ

追記:

この記事は説明不足だった。検索で出てくると迷惑なので追記しておく。 Syntax HighlighterのBloggerへの導入は Blogger に Syntax Highlighter ガジェットを追加する方法を参照すればOK。さらに注意として、私のブラウザ環境の場合、ダウンロードしたblogger.htmlファイルはInternet Exprolerで開かなければAdd to Bloggerボタンが表示されなかった(ChromeとFirefox 4.0ではエラーになる)。

本文:

• google-code-prettify 
• Syntax Highlighter

の二つがある。

google-code-prettifyは、クリボウの Blogger Tips: コードをハイライトする「Code Prettify」ウィジェットを参照。

Syntax Highlighterは、クリボウの Blogger Tips: コードをハイライトする「Blogger Syntax Highlighter」ウィジェット を参照。

この二つは共にJavascriptで書かれたクライアントサイドから汎用的に使うことが出来るライブラリ(google-code-prettify - Project Hosting on Google Code、SyntaxHighlighter)で、Bloggerウィジェット/WordPressプラグインなどはこのライブラリをそのまま利用して機能を実現する形となっている。

以下、Blogger Syntax Highligherウィジェットによるコード色づけ例。こちらの方が表示が綺麗なので、こちらを採用。後でウィジェット内のCSS設定してキーワード・構文毎の色づけとかもっと細かくできるようにしたい。

class Foo (object):
  def __init__(self, bar):
    self.bar = bar

  def egg(self):
    print("egg")

foo = Foo()
foo.egg()