pre 和 xmp 标记中的 HTML 代码呈现答案

【问题标题】：HTML code in pre and xmp tags renderspre 和 xmp 标记中的 HTML 代码呈现
【发布时间】：2014-01-05 10:46:58
【问题描述】：

我试图在<pre> 和<xmp> 标记中显示一些HTML 代码，但不是仅仅显示代码，而是实际呈现了这个HTML 代码。我还使用 Google Prettify 来突出显示语法。

<pre class="prettyprint code"></pre>

javascript

$(".code").html("<xmp>"+data+"</xmp>");
$('.prettyprinted').removeClass('prettyprinted');

prettyPrint();

所以当我尝试显示 <b>HEllo</b> 时，我得到 Hello

【问题讨论】：

不可复制。该代码在扩充为真实示例时，可以按预期工作。不清楚你为什么使用 both pre 和 xmp，因为除了解析之外它们基本相似：在xmp 中，除了元素的自己的结束标签被识别——这似乎是你想要的。
我使用 pre 是因为 google prettify 类需要它，而 xmp 因为我在互联网上发现它会强制代码不呈现。我对其他编程语言的代码没有问题，只是当我使用 HTML 时它呈现
如果我只放 xmp 标签，也会发生同样的事情。当我在 html 中打开 chrome 开发人员工具时，我可以将我的 html 标签视为原始文本，但在浏览器中它们会被渲染
所以？您应该在开发者工具中看到标签。
pastebin.com/DJB0Wu2H 这是我的问题，请参阅链接。我注意到一旦谷歌美化加载就会出现这个问题

【解决方案1】：

您必须使用 HTML 实体。

例如

&lt;b&gt;HEllo&lt;/b&gt;

显示为你好

【讨论】：

【解决方案2】：

我解决了这个问题。我在我的 css 中某处创建了class="tag"，并且显然 google 美化使用相同的类名 (.tag) 来标记 html 标签，所以在我将我的类的名称更改为另一个名称后，一切都很好。

【讨论】：