SyntaxHighlighter には pre タグではなく script タグがお得


文字 実体参照
< &lt;
& &amp;

SyntaxHighlighter による記述に <pre> タグを使うといろいろと不便な点がある。一番の問題は、<pre> 内では左表に示す文字を直接書き表わせないことだ。

<pre> タグを使うと…

このため、HTML のソースなどを書き表わす時はしちめんどくさいことになる。

<pre class="brush:html" title="表示例">
&lt;html>
    &lt;body>
        &lt;p>アンパサンド記号(&amp;)&lt;/p>
    &lt;/body>
&lt;/html>
</pre>
<html>
    <body>
    <p>アンパサンド記号(&)</p>
    </body>
</html>

<script> + CDATA セクションを使う

SyntaxHighlighter – Installation
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

XML用語辞典 [CDATAセクション]
http://www.atmarkit.co.jp/aig/01xml/cdata.html

そこで、ver.2.1 系から別の解決法が用意された。上の例を別の形で書き表すと、

<script type="syntaxhighlighter" class="brush:html" title="表示例"><![CDATA[
<html>
    <body>
        <p>アンパサンド記号(&)</p>
    </body>
</html>
]]></script>

このように、記号について何も考えずに自由に書けて便利。ただ、いくつか問題もあって…

CDATA セクションに書けない文字列がある。
CDATA セクションはその仕様上、その中に]]>という文字列を含むことができない。文中に含みたいときは]]&gt;のように実体参照を使おう。
<script> タグ中には </script> と書いてはいけない。
多くのブラウザでは、<script> タグの中に </script> という文字列を含むと予期しない動作をしてしまう。このときも&lt;/script>というように書けばよい。
RSS リーダー等によって CDATA セクションは読み飛ばされることがある。
CDATA セクションや <script> タグは、閲覧する環境によっては削除されてしまう。これはどうしようもない…

Syntaxhighlighter for MovableType プラグイン

ちなみに、このサイトでは Syntaxhighlighter for MovableType プラグインを使ってこれらを解決している。以前書いた ver.3.0 系対応版はこちら。

【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う
http://blog.remora.cx/2010/07/syntaxhighlighter-3-in-movable-type.html

このプラグインを使うと、上記の例は次のように、さらに簡潔に書き表せる。MovableType を使っているならこれが一番便利だろう。

[code:html;title:表示例]
<html>
    <body>
        <p>アンパサンド記号(&)</p>
    </body>
</html>
[/code]

コメントを残す