如何在<code>/<pre>标签中直接显示<div>标签？

Question

我在<code>标签内部使用标签<pre>在我的博客博客上显示代码.不幸的是,它不适用于HTML标记.有没有办法显示" <div>"内部<pre>或<code>标签而不实际将其解释为HTML？这就是我现在所做的:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

哪个适用于HTML以外的所有内容.知道怎么做到这一点？谢谢.

Answer 1

不幸的是,它不适用于HTML标记.

<code>表示"这是代码",<pre>表示"此标记中的空格很重要".两者都不意味着"不应将此元素的内容视为HTML",因此两者都能完美地工作,即使它们并不意味着您希望它们的含义.

有没有办法显示" <div>"内部<pre>或<code>标签而不实际将其解释为HTML？

如果你想呈现一个<角色,然后使用<,以>用于>与&供&.

您不能(在现代HTML中)编写标记并将其解释为文本.

谢谢.我现在正在使用此工具来转义HTML字符:http://www.htmlescape.net/htmlescape_tool.html (6认同)
@XedinUnknown - 和[这里](http://www.w3.org/TR/html-markup/Overview.html)它说你不应该引用那个文件.如果你是对的那么****这个星球上的每个浏览器**都不符合标准.你看起来不太对劲.[规范](http://www.w3.org/TR/html5/grouping-content.html#the-pre-element)描述了pre元素的内容模型,它可以包含元素.与[textarea](http://www.w3.org/TR/html5/forms.html#the-textarea-element)相比,它只能包含文本. (2认同)

Answer 2

看起来像一个只读textarea几乎你想要的.

<textarea readonly> <!-- html code --> </textarea>

我想澄清为什么这个被否决了.textarea标签允许文字HTML代码.当我遇到这个问题时,我恰好用它来显示文字HTML,而且与使用textarea相比,答案似乎相当复杂. (7认同)
我没有投反对票，但以防万一有人关心，看起来字符引用仍然在 `<textarea> … </textarea>` 中解析，例如 `>` 变成了 `>`。这确实意味着它不再是“原始”内容。 (2认同)

Answer 3

您可以使用"xmp"元素.在<xmp></xmp>年初以来一直在HTML中,为所有浏览器都支持.即使它不应该被使用,它也得到了广泛的支持.

内部的所有内容<xmp></xmp>都按原样使用(在那里没有识别标记lke标签或字符引用),除了明显的原因,元素本身的结束标记.

否则"xmp"呈现为"pre".

Answer 4

尝试:

<xmp></xmp>

举个例子:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

再见

Answer 5

只是逃脱HTML标记。例如 -

将<替换为<

替换>与>

在此处完成查找

Answer 6

这可以通过一点点 JavaScript 轻松实现。

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

运行下面的代码片段以查看其实际效果：

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

pre {
  padding: 1rem;
  background-color: #eee;
  border-radius: 0.25rem;
}