Fascinating: google-code-prettify を利用して、Blogger でソースコードをハイライト

Blogger で、以下のような感じでソースコードをキレイに表示…

  if (foo == 1) {
    fprintf(stdout,"SUCCESS!\n");
  } else {
    fprintf(stderr,"ERROR!\n");
  }

するには、以下をそのまま実施するだけでＯＫ。

ただ、上記ページのウィジェットは白背景用のデフォルト CSS を使う設定なので、当ブログのように黒背景だと見えにくくなったりする。

そこでとりあえず以下のサイトで紹介されている CSS をまんま利用することにした。

それがコチラのファイル。
これを適用するために、「マイブログ」の「レイアウト」から「HTML/JavaScript」の編集を選択し…

<style type="text/css">
@import "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css";
</style>

とあるところを…

<style type="text/css">
@import "http://dl.dropbox.com/u/54602979/prettify.css";
</style>

と編集した結果が冒頭のコード。

ネタ元：

蛇足：
こちらのサイトにも黒背景用の CSS が掲載されているが、ちょっとビビッド過ぎる印象。

2012年2月10日金曜日