質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

36500閲覧

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

muro

総合スコア99

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2グッド

6クリップ

投稿2015/09/02 07:38

ブラウザ上に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、それぞれで確認しましたが、いずれも結果は同じでした。
DrqYuto, hokke12👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

raccy

総合スコア21733

hello-world, pi-chan, kei344, kichi_hide, BlueMoon👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

ngyuki

総合スコア4514

beebed, pi-chan, Y.NINOMIYA👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

tanat

総合スコア18703

pi-chan, kei344, nae_stage👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2

<pre><code>もHTMLとして解釈させないためのタグではありません。(というか、そういう目的のタグはなかったかと…。)
JavaScriptなどで該当部分をサニタイズするのが手軽ではないでしょうか?

参考: JavaScriptで最低限のサニタイズをする

投稿2015/09/02 07:46

退会済みユーザー

退会済みユーザー

総合スコア0

pi-chan, BlueMoon👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cwi

2019/05/25 21:25

<xmp>は現行規格にはありませんが、環境によっては使えます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。