hide-k.net#blog: Convert Line Breaksを有効にするとレイアウトが崩れる

Convert Line Breaksを有効にして<pre>や<blockquote>タグを利用するとしばしばレイアウトが崩れる。これを防ぐためにFormatBreaksプラグインを導入してみた。

例えばConvert Line Breaksを有効な状態で

hoge
<pre>
pre
pre
</pre>

を投稿すると

<p>hoge<br />
<pre><br />
pre<br />
pre<br />
</pre></p>

というHTMLが生成されるためレイアウトが崩れる。<ul>、<ol>、<blockquote>なども一緒。

これを防ぐには<pre></pre>の前後に空白行を入れてやる。

<p>hoge</p>

<pre>
pre
</pre>

こうすると

<p>hoge</p>

<pre>
pre
pre
</pre>

となり、問題ない。

が、以下のように<pre></pre>内に空白行が含まれると

hoge

<pre>
pre

pre

pre
</pre>

以下のようなHTMLが生成される。

<p>hoge</p>

<pre>
pre

<p>pre</p>

<p>pre<br />
</pre></p>

そこでFormatBreaksプラグインを導入してみた。(Movable Type Plugin Directoryからのリンクが切れているのでここからダウンロードする。)

解凍したファイルの中からpluginsにformatbreaks.plをコピー、extlibディレクトリの下にbradchoateディレクトリを作ってformatbreaks.pmをその中にコピーする。

後はMTEntryBodyやMTEntryMoreタグを以下のように変更する。要はConvert Line Breakesを無効にしてプラグインで処理させる。format_breaksの値はsmart_*であればお好みで。

<$MTEntryBody convert_breaks="0" format_breaks="smart_xhtml_p"$>

注意点としてsmart_*を使ってもpreタグにclassなどの属性がついている場合にはsmartな処理をしてくれない。処理させるためにformatbreaks.pmの65行目あたりの

$in_pre = 1 if (!$in_pre && $p =~ m|<pre>|i);

を

$in_pre = 1 if (!$in_pre && $p =~ m|<pre|i);

に変更した。

hide-k.net#blog