| 文字 | 実体参照 |
|---|---|
| < | < |
| & | & |
SyntaxHighlighter による記述に <pre> タグを使うといろいろと不便な点がある。一番の問題は、<pre> 内では左表に示す文字を直接書き表わせないことだ。
<pre> タグを使うと…
このため、HTML のソースなどを書き表わす時はしちめんどくさいことになる。
<pre class="brush:html" title="表示例">
<html>
<body>
<p>アンパサンド記号（&）</p>
</body>
</html>
</pre>
<html>
<body>
<p>アンパサンド記号（&）</p>
</body>
</html>
<script> + CDATA セクションを使う
SyntaxHighlighter – Installation
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.htmlXML用語辞典 [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 セクションはその仕様上、その中に“
]]>”という文字列を含むことができない。文中に含みたいときは“]]>”のように実体参照を使おう。 <script>タグ中には</script>と書いてはいけない。- 多くのブラウザでは、
<script>タグの中に “</script>” という文字列を含むと予期しない動作をしてしまう。このときも“</script>”というように書けばよい。 - RSS リーダー等によって CDATA セクションは読み飛ばされることがある。
- CDATA セクションや
<script>タグは、閲覧する環境によっては削除されてしまう。これはどうしようもない…
Syntaxhighlighter for MovableType プラグイン
ちなみに、このサイトでは Syntaxhighlighter for MovableType プラグインを使ってこれらを解決している。以前書いた ver.3.0 系対応版はこちら。
【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う
https://blog.delphinus.dev/2010/07/syntaxhighlighter-3-in-movable-type.html
このプラグインを使うと、上記の例は次のように、さらに簡潔に書き表せる。MovableType を使っているならこれが一番便利だろう。
[code:html;title:表示例]
<html>
<body>
<p>アンパサンド記号（&）</p>
</body>
</html>
[/code]