ちなのひとりごと

Movable Typeでソースを表示

カテゴリー Movable Type :(2004/03/03 2:53 am)

 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>

と無理矢理1行で記述するしかなさそう(しばらくこれでやっている).
 これ以外に,一行が長くなると表示側も大変なことになるという点.まあこれはpreタグの宿命みたいなモノだからはっきり言って仕方ないのだが,なんとか回避策はないものだろうか.これでは不便だと思い,今度はスタイルシートでcodeというスタイルを設定し,pタグと一緒に設置してみた(<p class="code">)が,スペースやタブがうまく表示されず,階層化して表示させたい場合に不都合である.次に,codeタグを使ってみたが,codeタグは基本的に「ここがソースですよ」と宣言するだけのものなので,結局問題の解決にはなっていない.いろいろなblogサイトを見てみたが,みんな結構適当にblockquoteタグを使ったり,気にせずpreタグを使ったりしていた.さて,どんな方法がいいのやら.
 ここで,1行空いてしまう点について,ソースをコピーしてペーストしてみると,どうも1行空いているわけではないようだ.テキストエディタにペーストするときちんと1行空かないで表示されている.ということは,純粋に表示の問題だけ,と言うことか.ということで現在のところは,スタイルシートで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;
}

コメント

コメントする