Movable Typeで，ページのソースを表示させることが多くなった．まあそれは，MTを設置している今だけかもしれないけど，いちおう引用（ちなさいとではblockquoteタグを利用）とは区別したいと考えている．
それで，現在はpreタグを利用して表示させている．スタイルシートでpreタグの属性（？）をある程度指定しているので，エントリーにはタグを書くだけで良く，お手軽である．現在の設定は以下の通りである．なんか無駄に設定しているような気がするのはご愛敬．
pre {
FONT-WEIGHT: normal;
FONT-SIZE: 80%;
COLOR: #000000;
margin-bottom: 5px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
background: #DDDDDD;
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
border-style: solid;
border-color: #BBBBBB;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
preタグで囲まれた部分は整形済みテキストと認識され，改行やスペース，タブなどもそのまま等幅フォントで表示されるため，ソースの表示などには非常に有効だ．ところが，MTでエントリー内にpreタグを記述すると，少なくともちなさいとではおかしなことが起こる．もちろん，なんか表示するときに白抜けしたりすると言うこともあるのだが，それ以外にもいくつかおかしなことが起こる．たとえば，以下のようなソースを表示させてみる．
<pre> text_1 text_2 </pre>
＜表示＞
text_1
text_2
と，このようになぜか一行あきで表示されてしまうのだ．よくわからないので，仕方なくエントリーに記述するときに，
<pre>text_1<br />text_2</pre>
と無理矢理１行で記述するしかなさそう（しばらくこれでやっている）．
これ以外に，一行が長くなると表示側も大変なことになるという点．まあこれはpreタグの宿命みたいなモノだからはっきり言って仕方ないのだが，なんとか回避策はないものだろうか．これでは不便だと思い，今度はスタイルシートでcodeというスタイルを設定し，pタグと一緒に設置してみた（<p class="code">）が，スペースやタブがうまく表示されず，階層化して表示させたい場合に不都合である．次に，codeタグを使ってみたが，codeタグは基本的に「ここがソースですよ」と宣言するだけのものなので，結局問題の解決にはなっていない．いろいろなblogサイトを見てみたが，みんな結構適当にblockquoteタグを使ったり，気にせずpreタグを使ったりしていた．さて，どんな方法がいいのやら．
ここで，１行空いてしまう点について，ソースをコピーしてペーストしてみると，どうも１行空いているわけではないようだ．テキストエディタにペーストするときちんと１行空かないで表示されている．ということは，純粋に表示の問題だけ，と言うことか．ということで現在のところは，スタイルシートでline-height:100%;をpreタグに指定して，何とかごまかしている．
さらに調査をしていくうちに，こんなものを見つけた．
ウィンドウの端まで行くような英単語は改行されませんが、印刷する際に問題が生じます。そこで単語途中でも改行することが出来ます。
単語途中での改行の設定をするには、「word-wrap」プロパティにより行います。
おぉ，これを使えばうまくいきそう．ただし，IEにしか対応していないと書かれているところがちょっと不安．まあいいか．最終的に，以下のようにスタイルシートを設定した．しばらくこれでいってみるつもりである．
pre {
FONT-WEIGHT: normal;
FONT-SIZE: 80%;
COLOR: #000000;
margin: 5px;
background: #DDDDDD;
PADDING: 5px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
line-height: 100%;
word-wrap: break-word;
}
