Download
MovableType
Plugin

PRE 要素変換プラグイン

PRE 要素を、自動的に改行するブロック要素に変換するプラグインです。 <pre>, </pre> で囲まれた部分の空白文字が変換の対象になります。 変換しても、スペースの個数は変更されずにもとの個数のまま表示されます。 タブは、8桁のタブとしてスペースに変換されます。

Movable Type 2.x 用に開発してあります。Movable Type 2.661 で動作確認を行っています。


背景

PRE 要素は、コードの表示をするのに適していますが、自動的に改行されません。 これを何とかして自動的に改行するようにできないかというのが開発の動機です。 詳しくは nlog(n): pre 要素を自動改行させたい をご覧ください。


ダウンロード

preconv.tar.gz または preconv.zip のどちらかをダウンロードしてください。 内容は同じものです。中のファイルは1つだけですので、解凍後にディレクトリは作りません。ご容赦ください。


準備

プラグイン導入にあたり、Perl モジュールを追加インストールする等の準備は必要ありません。


スタイルシートへの追加

プラグインを導入すると、<pre>, </pre> は <div class="precode">, </div> というブロック要素に変換されます。あらかじめ、スタイルシートに「precode」というクラスを作っておく 必要があります。 サイトに合わせたレイアウトを指定してください。 PRE 要素のスタイルを明示的に指定している場合は、 設定項目をコピーして「.precode」という名前をつけるのが簡単です。 次の例では等幅フォントを指定しています。

        .precode {
                font-family: 'Courier New', 'Courier', 'Lucida Console', 'Osaka-等幅', monospace;
                margin: 1px;
                padding: 0px 2px 2px 8px;
                border-style: solid;
                border-width: 1px;
                border-color: #CCCCDD;
                background: #DDDDEE;
                letter-spacing: 0px;
                }

インストール

ダウンロードしたファイルを展開し、プラグイン用フォルダに置いてください。
CGIPath/plugins/preconv.pl


使えるようになるタグ

プラグインの導入により、次のコンテナタグが使えるようになります。

  • <MTCPreConv>

使い方

例えば、個別記事用の「Individual Entry Archive テンプレート」であれば、以下のように <$MTEntryBody$> と <$MTEntryMore$> をコンテナタグ <MTCPreConv>, </MTCPreConv> で囲みます。必要であれば、 他のアーカイブテンプレートや RSS, Atom テンプレートに対しても同様にコンテナタグを追加します。 

<MTCPreConv>
<$MTEntryBody$>
...
<$MTEntryMore$>
</MTCPreConv>

動作例

例えば、普通は本文中に 

<pre>&lt;?xml version="1.0"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;!-- Hello World in XHTML --&gt;
&lt;html
 xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
   &lt;title&gt;Hello World!&lt;/title&gt;
  &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Hello World!&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

と書くと、次のような表示となります。

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Hello World in XHTML -->
<html
 xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Hello World!</title>
  </head>
 <body>
  <p>Hello World!</p>
 </body>
</html>

このプラグインを使うと、本文に書かれた <pre>, </pre> タグは自動的に変換され、 囲まれた部分のスペースやタグも変換が行われます。 プラグインを入れても、本文に書く内容は同じです。 <pre>, </pre> を使って書いておきます。 自動的に変換され、次のような表示となります。一見同じようですが、幅を狭くすると違いを確認することができます。

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Hello World in XHTML -->
<html
 xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Hello World!</title>
  </head>
 <body>
  <p>Hello World!</p>
 </body>
</html>

プラグインを使った場合の本文は、次のように変換されます。赤色が変換された部分です。

<div class="precode">
&lt;?xml version="1.0"?&gt;<br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;<br />
&lt;!-- Hello World in XHTML --&gt;<br />
&lt;html<br />
&nbsp;xmlns="http://www.w3.org/1999/xhtml"&gt;<br />
&nbsp;&nbsp;&lt;head&gt;<br />
&nbsp;&nbsp; &lt;title&gt;Hello World!&lt;/title&gt;<br />
&nbsp;&nbsp;&lt;/head&gt;<br />
&nbsp;&lt;body&gt;<br />
&nbsp;&nbsp;&lt;p&gt;Hello World!&lt;/p&gt;<br />
&nbsp;&lt;/body&gt;<br />
&lt;/html&gt;
</div>

(ちなみに、「このコードの HTML での表現は?」と思ってこのページのソースを見るのは危険です。 気を失いそうになります。ご注意ください。)


ご利用に関して

無料でご利用になれます。

無保証

無保証です。何か問題が起きたとしても、作者は責任を持ちません。ご自身の責任の下でご利用ください。

ご意見

nlog(n): ウェブログ のコメント欄にお願いします。


更新履歴

  1. 2004年10月22日 バージョン 0.9 リリース [リリース情報]
    (preconv-0.9.tar.gz, preconv-0.9.zip)