ソースコードの表示にpreタグを使うように変更してみる

このブログで技術ネタを書く際に、コマンドや出力結果をわかりやすくするようにテーブルで囲むようにするのですが、普通にtableタグで囲むとコマンドの出力結果などが一部ずれたりします。
（何故tableタグを使っているのかは、昔の名残なのでスルーの方向で）

こういうSQLの出力結果とか。

testdb=# select * from test; no | name ----+------ 1 | foo 2 | bar (2 rows)

で、preタグを使ってそのままの状態を出力させるように工夫してみたのですが、tableタグの中にpreタグ書くなどとても面倒になり、よく考えたらpreタグだけでできるじゃん、ってことでCSSで定義しなおしてみました。

- CSSでのpreタグの定義

pre.program {
padding: 3px;
background-color: #EFEFEF;
border: 2px solid #7E8984;
color: #333333;
width: 600px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: -pre-wrap;
word-wrap: break-word;
}

まぁ、定義する内容はお好みなのですが、これであれば今までと見た目も変わらず、しかもコマンドの出力結果をずらすことなく表示できます。

- 使い方

<pre class="program">

testdb=# select * from test;
 no | name
----+------
  1 | foo
  2 | bar
(2 rows)


</pre>

- 結果

testdb=# select * from test;
 no | name
----+------
  1 | foo
  2 | bar
(2 rows)

CSSで定義している後半の方のwhite-space:は、定義したwidth内で折り返してもらうようにするための設定です。
下記エントリを参考にさせていただきました。

[ CSS ] pre でも改行を生かしたまま折り返す ＠ Bowz::Notebook

本件と関係ないんですが、Amebaのブログ編集画面は、勝手に空白を削除する処理が行われるので、綺麗に表示させるにはHTMLタグの編集画面から貼り付けて修正していくというのがあってちょっと面倒なんですがね・・・。

2011.06.28 追記

その後、アメブロでSyntaxHighlighterを使ってみる で書いたようにSyntaxHighlighterへ乗り換えてみました。