コード表示のためのスタイル

HTMLでコードを表示したい場合、通常はpre、codeを使って記述するが、MovableTypeのデフォルトのスタイルで記述し、「改行を変換」した場合、見た目があまりにもひどくなる。

そこで、コード表示のためのスタイルを検討することにした。

• 改行はそのままに。
• 背景、および枠で他と区別できるように。
• スクロールバーは使わない。

• preタグの仕様上、自動改行はあきらめ、あまりに一行が長くなるようなら手動で改行する。

しかし、改行自体はMovableTypeが挿入するので、これはスタイルだけではどうにもならない。
（もっともコードの中に空行がなければ、改行コードは挿入されないのだが…）

そこで、preタグ内では改行を無視するプラグインを使うことにした。

Six Apart - Movable Type プラグインディレクトリ: ModTextFilter

これで、構築時にフォーマットを「改良テキストフィルター」にすることにより、preタグ内での改行の挿入を防止できる。
あとは、スタイルだが、これは、テンプレートの「スタイルシート(ベーステーマ)」に、以下の行を加えて、とりあえず完了。ここで見えている状態そのものになる。

code {
    color: #000;
}
pre {
    white-space: pre;
    width: auto;
    margin-left: 2em;
    border-style: inset;
    background:#eee;
}