如何在 <code>/<pre> 标签中逐字显示 <div> 标签？答案

【问题标题】：How to show <div> tag literally in <code>/<pre> tag?如何在 <code>/<pre> 标签中逐字显示 <div> 标签？
【发布时间】：2012-07-08 08:26:36
【问题描述】：

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

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

这对除了 HTML 之外的所有内容都适用。知道如何实现这一目标吗？谢谢。

【问题讨论】：

How to escape < and > inside <pre> tags的可能重复
您真正想要的是<![CDATA[]]> 部分；祝你好运，等待浏览器作者在添加 kewl 脚注之间赶上 1988 年。

标签： html blogger

【解决方案1】：

很遗憾，它不适用于 HTML 标签。

<code> 表示“这是代码”，<pre> 表示“此标记中的空白很重要”。两者都不意味着“此元素的内容不应被视为 HTML”，因此两者都可以完美运行，即使它们并不意味着您想要它们的意思。

有没有办法在<pre> 或<code> 标记内显示“<div>”而不将其实际解释为 HTML？

如果要渲染&lt; 字符，请使用&lt;，&gt; 用于>，&amp; 用于&。

您不能（在现代 HTML 中）编写标记并将其解释为文本。

【讨论】：

谢谢。我现在使用这个工具来转义 HTML 字符：htmlescape.net/htmlescape_tool.html
@XedinUnknown — 而here 它说您不应该引用该文档。如果你是对的，那么地球上的每个浏览器都不符合标准。你看起来不太对劲。 The specification 描述了前置元素的内容模型，它可以包含元素。与只能包含文本的textarea 相比。

【解决方案2】：

似乎只读文本区域几乎可以满足您的需求。

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

【讨论】：

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

【解决方案3】：

您可以使用“xmp”元素。 <xmp></xmp> 从一开始就在 HTML 中，所有浏览器都支持它。即使它不应该使用，它也得到了广泛的支持。

<xmp></xmp> 中的所有内容都按原样使用（那里没有识别出标记 lke 标记或字符引用），但出于明显的原因，元素本身的结束标记除外。

否则“xmp”会像“pre”一样呈现。

【讨论】：

此标签已过时。
@UsmanAhmed 不管怎样 - xmp 被很好的东西使用，比如嵌入 markdown
xmp 可能已被弃用，但直到今天仍然是 HTML 规范来支持它（这就是所有主要浏览器都这样做的原因）。我想它永远不会被完全弃用，因为它是同类中唯一的标签，并且比被视为弃用时更广泛使用。
两年后仍在使用 Chrome，感谢您的回答解决了我的问题。
HTML 规范说：使用 pre 和 code 代替，并将“ html.spec.whatwg.org/#xmp

【解决方案4】：

试试：

<xmp></xmp>

例如：

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

再见

【讨论】：

效果很好，但根据文档，它已被弃用......太糟糕了，因为它太棒了:-D
Roland 一年前给出了相同的答案，但更详细，所以这是重复的。

【解决方案5】：

只需转义 HTML 标记。比如——

将 替换为 &lt;

将 > 替换为 &gt;

完整查找here

【讨论】：

【解决方案6】：

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

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

在下面运行 sn-p 以查看它的实际效果：

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

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

<pre>
  <code>
   .class {        
     color:red;
   }
   
   // I would like HTML code inside this
   <h1>Hello this is a heading</h1>
  </code>
</pre>

【讨论】：

【解决方案7】：

试试 CodeMirror (https://codemirror.net/)

它是一个轻量级的库，用于在 HTML 中设置代码样式。这是我所指的屏幕截图：

为我们工作得很好！

【讨论】：

【解决方案8】：

也许不是最好的答案，但你可以这样做：

<p><<input type="hidden">h1<input type="hidden">><input type="hidden">This code is 
displayed!<input type="hidden"><<input type="hidden">/h1<input type="hidden">></p>

&lt;p&gt;&lt;&lt;input type="hidden"&gt;h1&lt;input type="hidden"&gt;&gt;&lt;input type="hidden"&gt;This code is displayed!&lt;input type="hidden"&gt;&lt;&lt;input type="hidden"&gt;/h1&lt;input type="hidden"&gt;&gt;&lt;/p&gt;

【讨论】：

【解决方案9】：

<pre>
  <code><textarea>
    <div>Now you can write Tags inside pre tag!</div>
  </textarea><code>
 <pre>

【讨论】：

【解决方案10】：

使用这个：

<pre>
   <?= htmlentities($script) ?>
</pre>

【讨论】：

【解决方案11】：

是的，带有转义 xml 功能。不过，您需要启用 jQuery 才能使其工作。

<pre>
  ${fn:escapeXml('
    <!-- all your code -->
  ')};
</pre>

【讨论】：