问问题
65586 次
11 回答
108
不幸的是，它不适用于 HTML 标签。
<code>表示“这是代码”，<pre>表示“此标记中的空白很重要”。两者都不意味着“该元素的内容不应被视为 HTML”，因此两者都可以完美地工作，即使它们并不意味着您想要它们的意思。
有没有办法在不将其实际解释为 HTML的情况下显示“
<div>”内部<pre>或标记？<code>
如果您想渲染一个<字符，请使用<, 和>for>和&for &。
您不能（在现代 HTML 中）编写标记并将其解释为文本。
于 2012-07-08T20:50:24.643 回答
55
似乎只读文本区域几乎可以满足您的需求。
<textarea readonly> <!-- html code --> </textarea>
于 2015-08-07T15:48:54.607 回答
32
您可以使用“xmp”元素。从<xmp></xmp>一开始就在 HTML 中，所有浏览器都支持它。即使它不应该使用，它也得到了广泛的支持。
里面的所有东西都<xmp></xmp>照原样（没有标记lke标签或字符引用在那里被识别）除了，出于明显的原因，元素本身的结束标签。
否则，“xmp”将呈现为“pre”。
于 2016-10-06T15:42:18.873 回答
18
尝试：
<xmp></xmp>
举个例子：
<pre>
<xmp><!-- your html code --></xmp>
</pre>
再见
于 2017-04-13T18:16:19.390 回答
10
于 2016-12-13T13:20:29.817 回答
4
这可以通过一点 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>于 2020-04-17T11:54:57.487 回答
0
于 2015-06-02T20:03:08.347 回答
0
<pre>
<code><textarea>
<div>Now you can write Tags inside pre tag!</div>
</textarea><code>
<pre>于 2021-10-27T08:09:49.547 回答
0
也许不是最好的答案，但你可以这样做：
<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>于 2020-03-09T20:37:56.137 回答
-3
用这个：
<pre>
<?= htmlentities($script) ?>
</pre>
于 2018-11-28T13:17:32.260 回答
-4
是的，带有转义 xml 功能。您需要启用 jQuery 才能使其正常工作。
<pre>
${fn:escapeXml('
<!-- all your code -->
')};
</pre>
于 2014-12-17T23:18:45.667 回答