web-dev-qa-db-ja.com

解析せずにHTMLタグを表示するHTML / CSSの方法はありますか？

解析せずにHTMLタグを表示する方法はありますか？ XMPのようなタグは以前は完全に機能していましたが、今ではPREに置き換えられています。この例を見てください：

//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>

//New PRE tag requires &lt; and &gt; as replacement for < and >.
<PRE>
&#60;a href="http://example.com"&#62;Link&#60;/A&#62;
</PRE>

私が探しているのは、古いXMPタグに相当するものです。新しいPREタグはコードを解析します。

htmlcsscharacter-encodingspecial-characters
22
Atadj

script要素をtypeに設定してプレーンテキストを示し、そのdisplayプロパティをblockに設定できます。これは解析動作にのみ影響します。要素自体の終了タグ</script>を除いて、マークアップ（タグ、エンティティ、または文字参照）は認識されません。 （つまり、quitexmpと同じではありません。認識されるタグは</xmp>です。）個別に白にすることができます。 xmpおよびpreと同様のスペース処理、および/またはデフォルトでこれらの要素のようにフォントのモノスペースを設定します。

例：

<style>
    script {
        display: block;
    }
</style>

次に、ドキュメント本文内：

<script type="text/plain">
    <i>&eacute;</i>
</script>

IE、Chrome、Firefox、Operaの最新バージョンでテスト済み。 IE 8およびIE 7エミュレーションIE 9で動作しませんでしたが、おそらくエミュレーションのバグです。 。

ただし、機能が停止していないxmpの代わりにこれを使用する理由がわかりません。それは仕様にはありませんが、それについて心配している場合は、常に心配する必要がありました。 HTML 2.0（これまでで最初のHTML仕様）で回避可能であると言及されていましたが、HTML 3.2で廃止され、HTML 4.0で完全に削除されました（はるか昔：1997年）。

xmpは死ぬのではなく、復活しています。 W3C HTML5（W3Cスタッフによって現在のHTML仕様として特徴付けられています）は、xmpを廃止され、非準拠として宣言しますが、ブラウザに requirement を課します：「ユーザーエージェントはxmp要素は、セマンティクスの点で、およびレンダリングの目的で、pre要素と同等の方法で使用されます。 （ただし、パーサーはこの要素に対して特別な動作をします。）したがって、古い解析動作は明示的に必要ではなく、明確に暗示されています。

25
Jukka K. Korpela

Hey Guys個人的に<code> </code>タグの使用はDream Weaverでのみ機能し、<xmp> </xmp>を挿入しない限り、タグ</xmp>は正常に機能します。 <textarea> </textarea>を使用すると、他の人がWebサイトまたはページでコードを編集できるようになります。そのため、<xmp> </xmp>タグを引き続き使用し、そのタグを引き続き使用することをお勧めします。

5
Sean Cassiere

最近の方法は、（ブール）属性を読み取り専用にしてtextareaを使用することです。 XMPを使用することもできますが、これは非推奨であるため、最終的にはサポートされなくなる可能性があります。
例：

<textarea readonly='true'>
    <p>This is some text</p>
</textarea>
2
user3133463

もっと複雑にしたい場合は、jQueryを使用してカスタムタグを作成する方法もあります。この例では、<noparse>。

$('noparse').each(function(){
    if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
        $(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
    }
});

JSFiddle ここ

1
tjhorner

そして...数年経ちましたが、ブログをwordpressからlambdaとdynamodbに支えられたvuejsスパに変換するときに、同じ問題が発生します。

そして答えは;少なくとも私の状況では。エンティティをエスケープします。

&lt;は&amp;lt;になります

&gt;は&amp;gt;になります

などなど.

お役に立てれば。

1
morissette

ありません。

理論的にはCDATAブロックを使用できますが、text/htmlモードではそれをサポートするブラウザーはありません。

文字参照を使用します。

1
Quentin

Html iframeタグを使用して、表示するテキストをsrc属性に入れることをお勧めします。最初にそれをurlまたはbase64エンコードするだけです。

example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>

example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>

Result displayed as:
"<hello>"
0
Peter Korinek TellusTalk