---

---

See the Pen Amazing code by nodelay (@nodelay) on CodePen.

HTMLで自作のコードを公開する場合、PREタグやCODEタグを使います。

<pre>
<code><span class="bu lightred pie">詳細&コードを見る</span></code>
</pre>

上記はHTMLコードを書いた例ですが、その場合は「<>」と「&」を文字参照コードに変換して記述するとよくネットでは解説されいます。そうしないとHTMLがレンダリングされてコードではない表示になってしまうからです。（ブラウザがHTMLとして認識します）

変換しない場合は以下のようにCSSが適用された表示がされます。（CSSは省略します）

レンダリングされた状態です。

このような表示にしないために、HTML上では「<>」と「&」を文字参照に変換して記述する必要があると巷では言われています。

補足：上の図は頭のcodeタグと掲載ソースの間に改行がありますが、通常は入れません。（見やすいように入れてあります）
同様に、最後の閉じcodeタグと掲載ソースの間も改行は入れないでください。

文字参照は全角になっていますが実際には半角で記述します。
「<」→「＆ｌｔ；」 「>」→「＆ｇｔ；」
「&」→「＆ａｍｐ；」

こういったツールはすで存在しており「Syntax Highlighter」やWordpress用などでは「crayon」というプラグインが存在しています。

しかし、Web開発をしているとどちらのツールも使えない場合があります。

かといって、いちいちHTMLのCODEタグ内だけ「<>」や「&」を文字参照コードに変換して記述するのも、面倒といえば面倒です。

HTMLコードの「<>」や「&」を自分で文字参照コードに変換する方法

HTMLには「<>」や「&」を文字参照コードに変換しないで「CODEタグ」で記述すると、先ほどのようにWebレンダリングされてしまいます。

そこで、思いつくのが「Javascript」（今回はjQueryも使います）で、書き換えてしまう方法です。

たとえば、以下のようなスクリプトになります（要jQuery）

$('code').each(function(){
    var text=$(this).html().replace(/</g,'&lt;'); /*このままだと文字参照コードで表示されてしまう*/
    var text=text.replace(/>/g,'&gt;'); /*このままだと文字参照コードで表示されてしまう*/
    var text=text.replace(/&/g,'&amp;'); /*このままだと文字参照コードで表示されてしまう*/
    $(this).html(text);
});

しかし、これは失敗します。

なぜなら、ブラウザ上では以下のように表示されてしまうからです。

確かに変換できているのですが、表示が「文字参照コード」で表示されています。これは意図したものとは違います。表示上は普通にコードで表示してもらいたいのです。

この状態でブラウザでソースコードを見ると以下のようになっています。

ソースコード上は記述したとおりの内容です。

なぜ、こうなるかというと、「<>」だけの変換なら問題ないのですが、「＆」の変換を行うと、すでに変換済の「<>」にまで影響を与えてしまうからです。

なお、先ほどのJavascriptコードでは「DOMを書き換えているだけ」なので、ソースコードが変わらないのは当たり前です。

Javascriptにおける「DOM」を書き換えるという動作は、ソースコードそのものは書き換えません。ブラウザに読み込まれた内容だけを書き換えているので、表示上は変わるけど、ソースコード自体は変わらないのです。

これを回避するワザ

さて、これを回避するにはどうすればよいのでしょうか？

「＆」の変換は行わない

です。なぜなら、別にこの変換は不要だからです。

//codeタグ内でHTMLが実行されないようにする
//==================================================
$('code').each(function(){
    var text=$(this).html().replace(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    $(this).html(text);
});

ChromeとIE9以上で動作確認済です。（IE8は不可）

↑　このように表示されます。

これで意図した表示にすることができます。

IE8では動作しないのでご注意ください。

なお、実際にはHTMLの読み込みが終わってから動作させたいので、jQuery的には以下のように書いてください。

// ページ読み込みが終わった時に処理を実行する
//==================================================
jQuery(window).load(function(){
//処理を以下に記述

//codeタグ内でHTMLが実行されないようにする
//==================================================
jQuery('code').each(function(){
    var text=jQuery(this).html().replace(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    jQuery(this).html(text);
});

//ここまで
});

WordPressでも動作するように「＄」は「jQuery」に置き換えてあります。

---

---

---

最新記事はトップページで！

---