生のHTMLを表示したいのですが。次のように、"<"と">"をそれぞれエスケープしなければならないことは周知の通りです。
<PRE> this is a test <DIV> </PRE>
しかし、私はこれをしたくない。その方が読みやすいし、コピーして実際のHTMLコードとしてまた使いたくなるかもしれません。
PREよりもっとquot;raw"な環境で、これを可能にするものはないでしょうか? HTML5かもしれませんが、生のHTMLコードを表示するたびに、HTMLを編集し、すべてを変更し続ける必要はないのでしょうか?
例えば、<REALLY_REALLY_VERBATIM> ...... </<REALLY_REALLY_VERBATIM>
のようなものです。
**スクリーンショット
FF21では、javascriptによる解決策は機能しません。
**スクリーンショット2
最初の解決策はまだFirefox上で動作しません, ここにスクリーンショットがあります。 ここに画像の説明を入力]2。
xmp`要素はhttps://stackoverflow.com/questions/4545/what-was-the-xmp-tag-used-for。これはHTMLの初期からあり、すべてのブラウザでサポートされています。仕様書では眉をひそめていますが、HTML5 CRではまだ記述されており、ブラウザにサポートを要求しています(作者には使うなとも言っていますが、実際に防ぐことはできません)。
xmp`の中はすべてそのように扱われ、マークアップ(タグや文字参照)は認識されません。
それ以外の xmp
は pre
のようにレンダリングされる。
本当のXHTML」、つまりXMLメディアタイプで提供されるXHTML(これはまれである)を使用する場合、特別な解析規則は適用されないので、xmp
はpre
のように扱われる。しかし、"本当のXHTML "ではCDATAセクションを使用することができ、同様の解析ルールが適用されます。これは特別な書式を持たないので、おそらく pre
要素の中に記述することになるでしょう:
<pre><![CDATA[
This is a demo, tags like <p> will
appear literally.
]]></pre>
xmp`とCDATAセクションを組み合わせて、いわゆるポリグロットマークアップを実現する方法がわかりません。
編集者へ:INDENTATION LEVELS ALONE PLEASE, THEY ARE IMPORTANT -->; 基本的に、元の質問は2つの部分に分けることができます:
"some "data" here"
や、<i>...close italics with '</i>'-tag</i>
のように、</i
と"
をエスケープ/エンコードすべき(あるいは、コンテナ'の引用文字を"
から'
に変更すべき)ことは明らかです。(Parsed Character DATA): エンティティを展開します。 マークアップ言語/バージョンによっては、
<、
&(および
>)をエスケープしなければならない。 body
、div
、pre
などほとんどのタグがこのタイプに属します。
(HTML5までは)もこのタイプに属します。<
、&
(、>
)もエンコードする必要があります。
(最低限)。(置換可能文字データ): テキストの中のタグをマークアップとして扱わない(それでもマークアップである) はテキスト内のタグをマークアップとして扱わないので(それでもルール1が適用される)、
'(
<) をエンコードする必要はありません。 をエンコードする必要はありません。 しかし、エンティティはまだ展開されます。 アンパサンド' (
&) には特別な注意が必要です。 現在の*[HTML5仕様では、textareaは現在
RCDATAフィールドです][2]と(引用): (引用): >
raw text要素と
RCDATA要素のテキストは、以下の文字列を**含んではなりません。 文字列
"</"` (U+003C LESS-THAN SIGN, U+002F SOLIDUS)の出現回数。
のタグ名と大文字小文字を区別せずに一致する文字が続く。
要素の後にU+0009 CHARACTER TABULATION(タブ)のいずれかを続ける、
U+000A LINE FEED (LF)、 U+000C FORM FEED (FF)、 U+000D CARRIAGE RETURN
(CR)、U+0020 SPACE、U+003E GREATER-THAN SIGN (>)、U+002F SOLIDUS (/)。
したがって、何があろうと、textareaは重い実体変換ハンドラを必要とする。
textareaは最終的にエンティティをモジってしまう!(文字データ)は、**テキスト内のタグをマークアップとして扱わず、**実体を展開しません。 マークアップとして扱わず、エンティティを展開しません**。 そのため、生のスニペットコードがルール1(コンテナの終端文字(シーケンス)を持つことはできない)に違反しない限り、コンテナの終端文字(シーケンス)を持つことはできません。 スニペットコードがルール1(スニペット内にコンテナ閉じ文字(シーケンス)を持つことはできない)に違反していない限り、他のエスケープや拡張は必要ありません。 は他の*エスケープ/エンコーディングを必要としない。 スニペットの生ソース*でエンコードされる必要のある文字/文字列の数と、平均的なスニペットでその文字(列)が出現する可能性のある回数を**最小限に**するにはどうすればよいでしょうか。 では、この
CDATAコンテキストを持つ'コンテナとは何でしょうか? タグの値プロパティのほとんどはCDATAなので、隠し入力の値プロパティを使うこともできます([概念実証jsfiddleはこちら][3])。 しかし(ルール1に準拠する)、これは生のスニペットのネストされた引用符(
"と
')のエンコード/エスケープの問題を引き起こし、スニペットを取得/翻訳して別の(可視)要素に設定する(または単にtext-areaの値として設定する)いくつかのjavascriptが必要になります。どういうわけか、これはFFのエンティティで問題を起こしました(textareaのように)。しかし、ネストされた引用符をエスケープ/エンコードしなければならないという 'price' は、(HTML5)textareaよりも高いので、それは本当に重要ではありません(引用符はソースコードで非常に一般的です...)。 CDATA[<タグ>bla>bla</タグ>]]>
を使おうとするのはどうですか?/* */
を使うことを考えました(script-tagはid
を持つことができ、カウントでアクセスできます)。しかし、これは明らかに生のスニペット内の */
, ]]>
と </script
のエスケープ問題を引き起こすので、これは解決策のようにも見えません。
*他の実行可能な 'コンテナ'をこの回答へのコメントに投稿してください。
ちなみに、-
文字の数をエンコードしたり数えたりして、コメントタグ<!-- -->
の中でそれらをバランスさせることは、(ルール1は別として)この目的のためには正気の沙汰ではありません。
<hr>;
Jukka K. Korpela'さんの素晴らしい回答]4が残っています:*タグが最良の選択肢のように思えます。
忘れ去られた'
タグは
CDATA`を保持し、この目的のために意図され、そして実際に[pre
として扱われます)。しかし、これは '唯一のルールです。<!-- ATTENTION: replace any occurrence of </xmp with </xmp -->
<xmp id="snippet-container">
<div>
<div>this is an example div & holds an xmp tag:<br />
<xmp>
<html><head> <!-- indentation col 0!! -->
<title>My Title</title>
</head><body>
<p>hello world !!</p>
</body></html>
</xmp> <!-- note this encoded/escaped tag -->
</div>
This line is also part of the snippet
</div>
</xmp>
上記のcodeblokは、<xmp id="snippet-container">
が(ほぼ生の)コード・スニペット(div>div>xmp>html-document
を含む)を含む、生のマークアップを示しています。
このマークアップの閉じタグがエンコードされていることにお気づきでしょうか?ルールNo.1に従うため、これはエンコード/エスケープされています)。
だから、(時にはほとんど)生のコードを埋め込む/転送することは解決された/ように見える。
スニペット(とエンコードされた</xmp>
)の表示/レンダリングについてはどうでしょうか?
ブラウザはスニペット(snippet-container
内のコンテンツ)を、上のコードブロックにあるように正確にレンダリングします(スニペットが空白行で始まるかどうかは、ブラウザによって多少の違いがあります)。
これには、書式設定/インデント、エンティティ(文字列 &
など)、フルタグ、コメント、およびエンコードされた閉じタグ </xmp>
(マークアップでエンコードされているのと同じように)* が含まれます。また、ブラウザ(バージョン)によっては、contenteditable="true"
というプロパティを使ってこのスニペットを編集することもできます(すべてjavascriptを有効にしていない状態で)。textarea.value=xmp.innerHTMLのようにするのも簡単です。 **ということは、**...もし**スニペットにコンテナの終了文字列が含まれていなければ。 しかし**、生のスニペットに終了文字列
</xmp が含まれている場合**(xmp自体の例であるか、正規表現が含まれている場合など)、生のスニペットでその文字列をエンコード/エスケープする必要があり、エンコードされた
&/xmpを表示/レンダリングするためにそのエンコードを変換するjavascriptハンドラが必要です;lt;/xmp>
のように、</xmp>
をtextarea
内(編集/投稿用)や(例えば)pre
内に表示/レンダリングするためのjavascriptハンドラが必要です。
非常に初歩的な[jsfiddleの例はこちら][6]。なお、textareaへの取得/埋め込み/表示/取得はIE6でも完璧に動作しました。しかし、xmp
'のinnerHTML
を設定することで、IE'側でいくつかの興味深い'インテリジェントであろう動作が明らかになりました。それについては、フィドルにもっと詳しいメモと回避策がある。
しかし今、重要なキッカーがやってきました(あなたが非常に近くまでしか行けないもう一つの理由):
単純化しすぎた例として、このウサギの穴を想像してみてください:
意図された生のコード・スニペット:
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
さて、ルール1に従うには、</xmp[>]
シーケンスをエンコードする必要がありますね。
ということで、以下のようなマークアップが得られます(可能性のあるエンコーディングだけを使って):
<xmp id="container">
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
</xmp>
うーん...水晶玉を手に入れようか、それともコインをひっくり返そうか?いや、コンピュータがシステム時計を見て、導き出された数字が 'ランダム'であると述べるようにしよう。そうだ。 正規表現を使用する:xmp.innerHTML.replace(/<(?=xmp[>]/gi, '<');`を使うと、 'back'に変換される:
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
うーん...このランダムジェネレータは壊れているようだ...ヒューストン...?
このジョーク/問題を見逃してしまった場合は、'意図された生のコードスニペット'から読み直してください。
待って、私は知っている、私たちは(も)エンコードする必要がある......に......。
OK、'意図された生のコードスニペット'まで巻き戻して、もう一度読んでください。
なんとなく、これはSOで有名な愉快な、しかし真実のrexgex-answerのようなにおいがしてきた。
誰かがこの問題を解決する賢いアルゴリズムや解決策を知っているのかもしれないが、私は、埋め込まれた生コードはますます不明瞭になり、世界の他の部分と同じように、<
、&
(と>
)だけを適切にエスケープ/エンコードした方が良いというところまでいくだろうと推測している。
結論: (xmp
タグを使用する)
xmp
タグを使用する) '基本的な第一レベル'エスケープ/エンコーディングのみを使用する既知のスニペットで、ウサギの穴に落ちないように、元の目的に非常に近づくことができます、お役に立てれば幸いです!
PS:
というのも、彼はxmpタグを覚えていた人だからです(私は何年も忘れていて、pre
やtextarea
などのような一般的に提唱されているPCDATA要素に気を取られていました)。
この回答は、(どんな未知の生のスニペットでも)それができない理由を説明し、埋め込み/転送のためにtextareaをアドバイスするときに、他のいくつかの(今は削除された)回答が見落としていたいくつかの明らかな落とし穴を説明することに端を発しています。Jukka'さんの回答もサポートし、さらに説明するために、私の既存の説明を拡張しました(エンティティや*CDATAに関することは、コードページよりもほとんど難しいので)。
安くて陽気な答え:
<textarea>Some raw content</textarea>
textareaは、タブ、複数のスペース、改行、すべての ⁇ 語的な折り返しを処理します。 有効なHTMLをコピーして貼り付け、有効なHTMLをすべて貼り付けます。 また、ユーザーはコードボックスのサイズを変更できます。 CSS、JS、エスケープ、エンコードは必要ありません。
外観や動作を変更することもできます。 これがモノスペースフォントで、編集が無効で、フォントが小さく、境界線がありません。
<textarea
style="width:100%; font-family: Monospace; font-size:10px; border:0;"
rows="30" disabled
>Some raw content</textarea>
このソリューションはおそらく意味的に正しくありません。 したがって、それが必要な場合は、より洗練された回答を選択することをお勧めします。
@GitaarLABと@Jukkaは、「< xmp>」タグは廃止されましたが、それでも最高です。 このように使うと。
<xmp>
<div>Lorem ipsum</div>
<p>Hello</p>
</xmp>
次に、最初のEOLがコードに挿入され、[ひどく見える](
)。そのEOLを削除することで解決できます。
<xmp><div>Lorem ipsum</div>
<p>Hello</p>
</xmp>
しかし、それはソースで悪く見えます。 以前は「< div>」をラッピングして解決していましたが、最近、CSS3ルールがわかりました。
xmp { margin: 5px 0; padding: 0 5px 5px 5px; background: #CCC; }
xmp:before { content: ""; display: block; height: 1em; margin: 0 -5px -2em -5px; }
これは[見栄えが良く](
1/)。