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

我使用<code> <pre> <code>标记内的<code>标记在博客博客上显示代码。 不幸的是,它不适用于HTML标签。 有没有什么办法可以在<pre><code>标签内显示“ <div> ”,而不需要将其实际解释为HTML? 这就是我现在所做的:

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

除了HTML之外,其他的都可以。 任何想法如何实现这一目标? 谢谢。

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

<code>意思是“这是代码”, <pre>意思是“这个标记中的空白是显着的”。 也不是“这个元素的内容不应该被视为HTML”,所以两者都可以很好地工作,即使它们不代表你想要的内容。

有没有什么办法可以在<pre><code>标签内显示“ <div> ”,而不需要将其实际解释为HTML?

如果你想渲染一个<字符,那么使用&lt;&gt; for &amp;&

你不能(在现代的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标签。 例如 –

<&lt;

replace>&gt;

在这里完成查找

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

这是一个轻量级的库,用HTML格式编码。 以下是我所指的屏幕截图:

在这里输入图像描述

为我们工作得很好!

是的,用一个转义xml函数。 你需要启用jQuery才能使其工作。

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