如何在<code>/<pre>标签中保留<div>标签的实际内容？

Question

我在我的博客中使用 <pre> 标签内的 <code> 标签来显示代码。不幸的是，它不能与HTML标签一起使用。有没有方法可以在 <pre> 或 <code> 标签内显示 "<div>" 而不会被解释为HTML？目前我做的是：

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

这对除了HTML之外的所有内容都有效。有什么方法可以实现这一点吗？谢谢。

- Loolooii

---

可能是如何在<pre>标签内转义<和>的重复问题。 - Jukka K. Korpela

你真正想要的是一个 <![CDATA[]]> 部分；祝好运等待浏览器作者在添加酷炫功能的同时赶上1988年的步伐。 - Toby Speight

Answer 1

很不幸，它无法与HTML标签一起使用。

<code>表示“这是代码”，<pre>表示“这个标记中的空格是有意义的”。它们都不表示“此元素内容不应视为HTML”，因此两者都可以完美地工作，即使它们不符合您想要的含义。

有没有办法在不实际解释为HTML的情况下，在<pre>或<code>标记中显示"<div>"？

如果要呈现一个<字符，则使用<，对于>请使用>，对于&请使用&。

在现代HTML中，无法编写标记并将其解释为文本。

- Quentin

---

谢谢。我现在正在使用这个工具来转义HTML字符：http://www.htmlescape.net/htmlescape_tool.html - Loolooii

@XedinUnknown — 而且这里说你不应该引用那个文档。如果你是对的，那么全球所有的浏览器都不符合标准。你是错的。规范描述了pre元素的内容模型，它可以包含元素。与只能包含文本的textarea进行比较。 - Quentin

Answer 2

看起来一个只读文本区域可以做你想要的大部分事情。

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

- Jason Wilkins

---

我希望您能解释一下为什么这个问题被投票否决了。Textarea标签允许使用字面HTML代码。我只是碰巧在使用它来显示字面HTML时发现这个问题的答案似乎比使用textarea要复杂得多。 - Jason Wilkins

我没有点踩，但如果有人在意的话，看起来字符引用仍然会在<textarea>…</textarea>内解析，例如>会变成>。这意味着它不再是“原始”内容了。 - ShreevatsaR

这是一个很好的答案，我唯一能想到使用 > 这样的代码的原因是默认的文本区域样式。否则，每当我需要在我的代码中执行此操作时，这是我的首选选项。 - Elliot Harrell

Answer 3

您可以使用"xmp"元素。自HTML开始以来，<xmp></xmp>一直存在，并且受到所有浏览器的支持。即使不应使用它，但它得到广泛支持。

除了元素本身的结束标签之外，<xmp></xmp>内的所有内容均按原样呈现（不识别标记或字符引用等标记）。

否则，"xmp"的呈现方式与"pre"相同。

- Roland

---

该标签已经过时。 - Usman Ahmed

@UsmanAhmed 无论如何 - xmp 被用于一些很好的东西，比如嵌入 markdown。 - WestCoastProjects

“xmp” 可能已经被弃用，但 HTML 规范至今仍支持它（这也是为什么所有主流浏览器都支持它的原因）。我想它永远不会完全被弃用，因为它是唯一一种标签，并且在当今比被认为弃用时更广泛地使用。 - Nate I

两年后仍在Chrome上工作，感谢解决我的问题的答案。 - Dave S

HTML规范指出：请使用pre和code，将"<"和"&"字符转义为"<"和"&"。 https://html.spec.whatwg.org/#xmp - webpreneur

Answer 4

尝试：

<xmp></xmp>

例如：

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

再见

- Alberto Cerqueira

---

工作得很好，但根据文档，它已被弃用...太糟糕了，因为它真的很棒 :-D - ssougnez

罗兰一年前已经给出了相同的答案，并且更详细，因此这是一个重复的回答。 - Dave S

Answer 5

只需转义HTML标签。例如-

将<替换为<

将>替换为>

完整的查询请查看此处

- Vivek Kalyanarangan

Answer 6

这可以轻松地通过使用一点JavaScript来实现。

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;
}

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

- Hirok Banik

Answer 7

试试 CodeMirror（https://codemirror.net/）

这是一个轻量级的库，可以在 HTML 中为代码添加样式。以下是我所指的屏幕截图：

对我们来说效果不错！

- Collarbone

Answer 8

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

- Yuwan Kumar

Answer 9

如果你只需要一个开标签，例如<span>：

document.querySelectorAll('code').forEach(codeElement => {
    codeElement.innerText = `<${codeElement.innerText}>`;
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

- Vince

Answer 10

这不是最好的答案，但你可以尝试在标签内添加注释，像这样：

<pre>
    <code<!-->>
        ...
    <<!-->/<!-->code>
</pre>

- Elliot Harrell