如何在 HTML 页面上显示原始 HTML 代码

Question

How can I show HTML snippets on a webpage without needing to replace each < with < and > with > ?

换句话说，是否有在 _您点击结束标记之前不呈现 HTML 的标记_？

原文由 Steven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是否有在 您点击结束标记之前不呈现 HTML 的标记？

不，没有。在 HTML 中，除了转义某些字符外别无他法：

• & 作为 &
• < 作为 <

（顺便说一句，没有必要逃避 > 但人们经常出于对称的原因这样做。）

当然，您应该将生成的转义 HTML 代码包围在 <pre><code>…</code></pre> 中，以 (a) 保留空格和换行符，以及 (b) 将其标记为代码元素。

所有其他解决方案，例如将您的代码包装到 <textarea> 或（已弃用） <xmp> 元素中， 都会中断. 1个

向浏览器声明为 XML 的 XHTML（通过 HTTP Content-Type 标头！ - 仅设置 DOCTYPE 是 _不够的_）也可以使用 CDATA 部分：

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

但这只适用于 XML，不适用于 HTML，甚至这也不是万无一失的解决方案，因为代码不能包含结束定界符 ]]> 。因此，即使在 XML 中，最简单、最可靠的解决方案也是通过转义。

---

1案例：

 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>

原文由 Konrad Rudolph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

久经考验的 HTML 方法：

1. 将 & 字符替换为 --- &
2. 将 < 字符替换为 --- <
3. 将 > 字符替换为 --- >
4. 可选择使用 <pre> 和/或 <code> 标签围绕您的 HTML 样本。

原文由 Dolph 发布，翻译遵循 CC BY-SA 2.5 许可协议