Bloggerのブログ記事内でプログラムなどのコードをハイライトして表示させる

先ほど、Bloggerでもコードハイライトが使えないかと調べていたら、すぐに見つかった。
要するにこれはBloggerで使えるウィジェットだ。

まずはこちらのサイトへ進み、「Add To Blogger」という小さなボタンがあるのでクリックする。

そうするとBlogger内のブログを選択するページになるので、コードハイライトをさせたいブログを選択する。
このとき、タイトルをそのままにしておくと、サイドバーにこのウィジェットが表示されてしまうので、タイトルは全文字列を消しておこう。

次に、「ウィジェットを追加」ボタンをクリックすれば、ウィジェットのインストールが完了だ。


何かコードを書いてみる。
たとえばSQL。

select *
from users as User
where User.approval = 1
order by User.created desc
limit 1

このSQLをハイライトさせるため、前後をPREタグで囲む。
囲んだ後、開始タグ内に以下のアトリビュート指定をいれておく。



name="code"
class="sql"

このclassには、ハイライトさせたい言語を指定する事が出来るので、RubyなコードでもHTMLコードでもPHPなコードでも、きちんとハイライトして色分け表示が可能になる。

詳しい言語のタイプや細かいオプション指定などは、こちらを参照の事。

というわけで、上記SQLをハイライトすると、こうなる。

select *
from users as User
where User.approval = 1
order by User.created desc
limit 1

なかなかキレイでよろしい。

うほほ！