ブラウザ上にHTMLのコードをそのまま表示させたいと思っています。
今回の例として画像を表示するためのコードをそのままブラウザに載せたいのですが、以下のように<pre>と<code>で囲っていても実際にブラウザを開いてみると、タグが実行され画像が表示されてしまいます。
<pre><code>に囲まれたコード部分をエスケープすれば表示上は問題ないのですが、わざわざエスケープする手間が発生するため、エスケープさせずに表示する方法はないのでしょうか? なおブラウザは、chrome、firefox、IE、Edge、それぞれで確認しましたが、いずれも結果は同じでした。html
1<pre> 2 <code> 3 <img src="example.gif" width="100" height="100" alt="example" /> 4 </code> 5</pre>
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答4件
6
ベストアンサー
三つの方法を考えました。
######方法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
総合スコア21693
3
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
総合スコア4512
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
3
これが出来るようになってしまうと、例えば
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/
の様なサイトやツールを使うことも可能なので、個人で手間を省きたいという用途であれば1を便利なツールで補助するのが良いかと思います。
投稿2015/09/02 07:58
総合スコア18611
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
2
<pre>
も<code>
もHTMLとして解釈させないためのタグではありません。(というか、そういう目的のタグはなかったかと…。)
JavaScriptなどで該当部分をサニタイズするのが手軽ではないでしょうか?
投稿2015/09/02 07:46

退会済みユーザー
総合スコア0
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント
関連した質問
Q&A
解決済
HTMLファイルをブラウザで表示するとCSSや画像が反映されないエラーを解消したい
回答1
クリップ0
更新
2023/03/18
Q&A
解決済
headerの下に背景画像を表示するようにしたい
回答2
クリップ0
更新
2023/03/24
Q&A
解決済
ボタンのcssが一部にしか効かない
回答2
クリップ0
更新
2020/03/04
Q&A
解決済
そのエラーが箇所が下記のPHPには見当たりません。
回答2
クリップ0
更新
2023/03/17
意見交換
受付中
零細IT企業から大手IT企業への転職
回答7
クリップ0
更新
2023/03/16
Q&A
解決済
Googleフォーム回答後のGASでの自動返信メールを、SendGrid経由で送信したい。
回答2
クリップ1
更新
2023/03/21
Q&A
受付中
gas 埋め込みスクリプトをscriptタグに移動させたい
回答1
クリップ1
更新
2023/03/21
Q&A
解決済
classNameの使い方と引数の中身について
回答2
クリップ1
更新
2023/03/23
同じタグがついた質問を見る
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。