[解決済み】HTMLのスニペットをHTMLで表示する

質問

WebページでHTMLスニペットを表示する場合、各スニペットを < で < と > と > ?

のタグはあるのでしょうか？ 終了タグを打つまでHTMLをレンダリングしません。 ?

解決方法は？

のタグはありますか？ は、終了タグを打つまでHTMLをレンダリングしないのですか？

いいえ ないんです。正しいHTMLでは、いくつかの文字をエスケープする以外に方法はないのです。

• & として &
• < として <

(をエスケープする必要はありません。 > が、対称性を保つためにそうすることが多いようです)。

そしてもちろん、出来上がったエスケープされた HTML コードを <pre><code>…</code></pre> で、(a) 空白と改行を維持し、(b) コード要素としてマークアップします。

他のすべての解決策、例えば、コードを <textarea> または (非推奨) <xmp> 要素を使用します。 は壊れます。 . ¹

ブラウザにXMLとして宣言されたXHTMLは（HTTPの Content-Type ヘッダを表示します。- を設定するだけで DOCTYPE は 物足りない ) は、代わりにCDATAセクションを使うこともできます。

<![CDATA[Your <code> here]]>

しかし、これはHTMLではなくXMLでのみ機能します。また、コードにクロージングデリミタを含めてはならないため、この方法も完全な解決策ではありません。 ]]> . ですから、XMLの場合でも、最もシンプルで堅牢な解決策は、エスケープを使用することです。

¹ 事例を紹介します。

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>