MovableTypeが自動的に入れる改行

MovableTypeが自動的に入れる改行<br />の仕様を解読して，思い通りに改行を入れる方法を検討する．

MovableTypeが自動的に入れる改行

カモランドでは，不定期日記にMovable Typeを使っているのだが，最近少し凝ったことをやりたくなった．

具体的には，ソースコードを含めるときに<pre>タグを使って，カモランドと同じデザインが適用されるようにしたい．

しかし試しに<pre>タグを使ってみると，勝手にMovableTypeに改行を入れられて異様に間延びしたHTMLになる場合があり，どうも俺の思い通りになってくれない．

そこで，MovableTypeが改行を入れるロジックを調べることにした．(Movable Type 2.661)

ロジックは，lib/MT/Util.pmにあるhtml_text_transform()関数に記述されていた．これを調べてみると，以下のような結果が得られた．

改行の仕様

前提

おはよう →段落1になる
こんにちは →段落1になる
 
こんばんは →段落2になる

動作1

<(?:table|ol|ul|pre|select|form|blockquote|div|q)

動作2

考察

• <pre>の開始前に空行を1行挿入する (<pre>の行以降を，<pre>で始まる新しい段落として認識させるため)
• <pre>から</pre>の範囲内には，空行を入れない (<pre>〜</pre>の範囲全体を1つの段落として認識させるため)

というルールを守れば，<pre>〜</pre>の範囲全体が動作2で扱われて，<br />の自動挿入を抑制できる．

ケーススタディ

(A) <pre>を単独で使う場合

記述法

1. <pre>の前に空行を1行挿入する
2. </pre>の後に空行を挿入するかどうかは任意(見栄えで判断)

入力例

こんにちは
 
<pre>
1行目
2行目
</pre>
です

HTML出力

<p>こんにちは</p>
 
<pre>
1行目
2行目
</pre>
です

(B) <pre>〜</pre>内に空行を含む場合

記述法

1. <pre></pre>の前後は(A)と同じ
2. ただし空行を入れると，<pre>内であってもそこで段落が切れてしまうため，空行を入れてはいけない．例えば空行にしたい行には，半角スペース1個を入力する

入力例

こんにちは
 
<pre>
1行目
   ←半角スペース1個
2行目
</pre>
です

HTML出力

<p>こんにちは</p>
 
<pre>
1行目
 
2行目
</pre>
です

→各行にbrが付かないのでOK

(C) <pre>を<div>の内側で使う場合

記述法

1. <div>の前に空行を1行挿入する
2. </div>の後に空行を挿入するかどうかは任意(見栄えで判断)

入力例

こんにちは
 
<div>
<pre>
1行目
2行目
</pre>
</div>
です

HTML出力

<p>こんにちは</p>
 
<div>
<pre>
1行目
2行目
</pre>
</div>
です

(D) <blockquote>を<br />変換付きで使いたい場合

記述法

1. <blockquote>の前に空行を挿入しない
2. </blockquote>の後に空行を挿入するかどうかは任意(見栄えで判断)

入力例

こんにちは
<blockquote>
1行目
2行目
</blockquote>
です

HTML出力

<p>こんにちは<br />
<blockquote><br />
1行目<br />
2行目<br />
</blockquote><br />
です<br />
</p>