如何在<code> / <pre>标记中按字面显示<div>标记？

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

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

对于HTML以外的所有内容都可以正常工作。任何想法如何实现这一目标？谢谢。

不幸的是，它不适用于HTML标签。

<code>表示“这是代码”，<pre>表示“此标记中的空白很重要”。两者均不表示“不应将此元素的内容视为HTML”，因此即使它们不表示您想要的含义，它们也可以正常工作。

有没有办法在实际上不将其解释为HTML的情况下<div>在其内部<pre>或<code>标记中显示“ ” ？

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

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

似乎只读的textarea几乎可以满足您的要求。

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

您可以使用“ xmp”元素。在<xmp></xmp>年初以来一直在HTML中，为所有浏览器都支持。即使不应该使用它，它也得到广泛支持。

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

否则，“ xmp”呈现为“ pre”。

尝试：

<xmp></xmp>

举个例子：

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

再见

只是逃脱HTML标记。例如 -

将<替换为<

替换>与>

在这里完成查询

只需使用一点点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>

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

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

为我们做好了！

也许不是最佳答案，但是您可以执行以下操作：

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

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

用这个：

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

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

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