HTMLコードをそのまま表示させたい

ブラウザ上にHTMLのコードをそのまま表示させたいと思っています。

今回の例として画像を表示するためのコードをそのままブラウザに載せたいのですが、以下のように<pre>と<code>で囲っていても実際にブラウザを開いてみると、タグが実行され画像が表示されてしまいます。

html
1<pre>
2	<code>
3		<img src="example.gif" width="100" height="100" alt="example" />
4	</code>
5</pre>

<pre><code>に囲まれたコード部分をエスケープすれば表示上は問題ないのですが、わざわざエスケープする手間が発生するため、エスケープさせずに表示する方法はないのでしょうか？なおブラウザは、chrome、firefox、IE、Edge、それぞれで確認しましたが、いずれも結果は同じでした。

回答4件

ベストアンサー

三つの方法を考えました。
######方法1 XHTMLにする。
XMLの一種であるXHTMLにすれば<![CDATA[...]]>を使用することで、文字列として解釈させることができます。

XML
1<?xml version="1.0" encoding="utf-8"?>
2<!-- 中略 -->
3<pre>
4    <code><![CDATA[
5        <img src="example.gif" width="100" height="100" alt="example" />
6    ]]></code>
7</pre>

ただし、この方法は普通のHTMLでは使用できません。XML限定です。
######方法2 MathMLを組み込む。
HTML5では<![CDATA[...]]>が直接使うことはできませんが、HTML5の中のMathMLでは使えます。なので、組み込みMathMLにしてしまえばいいのです。

HTML
1<pre>
2    <code><math><![CDATA[
3        <img src="example.gif" width="100" height="100" alt="example" />
4    ]]></math></code>
5</pre>

ただし、組み込みMathMLに対応していないブラウザでは表示できません。
######方法3 scriptを使う。
考え方はngyukiさんの方法と一緒です。

HTML
1<pre><code id="pc0"></code></pre>
2<script id="ct0" type="text/plain">
3     <img src="example.gif" width="100" height="100" alt="example" />
4</script>
5<script>
6     document.getElementById('pc0').textContent = document.getElementById('ct0').textContent;
7</script>

JavaScript部分はもうちょっと工夫したいです。

投稿2015/09/02 11:00

raccy

総合スコア21693

Web アプリから出力するのではなく、手書きをするときにエスケープするのはめんどくさすぎるし可読性も悪いのでどうにかしたい、という質問でしょうか？

例えば、script タグの中身はタグとして解釈されないので（script の閉じタグは除く）、次のように script を適当な text の type に変更し、中身に書きたいものを書いて、JavaScript で取り出して pre にテキストノードとして突っ込めばできます。

html
1<pre>
2    <code id="hoge">
3        <script type="text/plain">
4            <img src="example.gif" width="100" height="100" alt="example" />
5        </script>
6    </code>
7    <script>
8    (function(){
9        var elem = document.getElementById('hoge');
10        var text = elem.querySelector('script').innerHTML;
11        elem.appendChild(document.createTextNode(text));
12    }())
13    </script>
14</pre>

投稿2015/09/02 08:03

ngyuki

総合スコア4512

これが出来るようになってしまうと、例えば

HTML
1<pre>
2    <code>
3        <img src="example.gif" width="100" height="100" alt="example" />
4       </code></pre>の説明:</code></pre>は整形済みコードを表示します。
5    </code>
6</pre>

というような内容になった場合、pre内の"</pre>"を評価してしまうことになるので原理的に難しいかと思われます。

なので
1．事前にエスケープして記述する
2. データを別に持っておいて、表示するタイミングでjavascriptでエスケープしてから読みこみ要素を追加
3．データは別に持っておいて、表示するタイミングでサーバサイドでエスケープしてからHTMLを組み込む
する
というようなアプローチが必要になってきます。

どの方法がいいかは記述する量は用途によるかとは思いますが、
HTMLエスケープするのは
http://webtools.dounokouno.com/htmlescape/
の様なサイトやツールを使うことも可能なので、個人で手間を省きたいという用途であれば１を便利なツールで補助するのが良いかと思います。

投稿2015/09/02 07:58