はてなブログでソースコードブロックにスクロールバーを表示する

はてなブログのソースコードにスクロールバーを表示する方法に手間取ったのでメモ。

ブログのデザインメニューから[カスタマイズ]->[デザインCSS]と選択して以下を記述すれば表示されます。

pre.code{
   white-space: pre;
   overflow: auto;
}

ちなみにこのブログでは以下のように指定しています。

pre.code{
   font-size: 85%;
   background:#EEEEEE;
   max-height: 500px;
   white-space: pre;
   overflow: auto;
}

例：

横スクロールバーを表示させるか折り返すか、あるいは縦スクロールバーを表示するかすべて表示するかはコードをブログに書き込むときは悩みどころですね。自分は折り返しでコードの体裁が崩れるのが嫌なので、スクロールバーを表示したいのですが、見る人によってはスクロールさせるのが面倒と思う方もいるかもしれません。