Html 如何在 <code>/<pre> 标签中逐字显示 <div> 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11386586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show <div> tag literally in <code>/<pre> tag?
提问by Loolooii
I'm using <code>tag inside of a <pre>tag to show code on my blogger blog. Unfortunately it doesn't work with HTML tags. Is there any way to show "<div>" inside of <pre>or <code>tag without actually interpreting it as HTML? This is what I do right now:
我在<code>标签内使用<pre>标签来在我的博主博客上显示代码。不幸的是，它不适用于 HTML 标签。有没有办法<div>在不实际将其解释为 HTML 的情况下在<pre>或<code>标记内部显示“ ” ？这就是我现在所做的：
<pre>
<code>
.class {
color:red;
}
// I would like HTML code inside this
</code>
</pre>
Which works ok for everything except HTML. Any idea how to achieve this? Thanks.
这对除 HTML 之外的所有内容都适用。知道如何实现这一目标吗？谢谢。
回答by Quentin
Unfortunately it doesn't work with HTML tags.
不幸的是，它不适用于 HTML 标签。
<code>means "This is code", <pre>means "White space in this markup is significant". Neither means "The content of this element should not be treated as HTML", so both work perfectly, even if they don't mean what you want them to mean.
<code>表示“这是代码”，<pre>表示“此标记中的空白很重要”。两者都不意味着“不应将此元素的内容视为 HTML”，因此两者都可以完美地工作，即使它们的含义并非您希望它们的含义。
Is there any way to show "
<div>" inside of<pre>or<code>tag without actually interpreting it as HTML?
有没有办法
<div>在不实际将其解释为 HTML 的情况下在<pre>或<code>标记内部显示“ ” ？
If you want to render a <character then use <, with >for >and &for &.
如果要渲染<字符，请使用<, 和>for>和&for &。
You can't (in modern HTML) write markup and have it be interpreted as text.
您不能（在现代 HTML 中）编写标记并将其解释为文本。
回答by Jason Wilkins
It seems like a readonly textarea does pretty much what you want.
看起来只读 textarea 几乎可以满足您的需求。
<textarea readonly> <!-- html code --> </textarea>
回答by Roland
You can use the "xmp" element. The <xmp></xmp>has been in HTML since the beginning and is supported by all browsers. Even it should not be used, it is broadly supported.
您可以使用“xmp”元素。在<xmp></xmp>年初以来一直在HTML中，为所有浏览器都支持。即使不应该使用它，它也得到了广泛的支持。
Everything inside <xmp></xmp>is taken as it is (no markup lke tags or character references is recognized there) except, for apparent reason, the end tag of the element itself.
里面的所有东西都<xmp></xmp>按原样（没有标记 lke 标签或字符引用在那里被识别），除了明显的原因，元素本身的结束标签。
Otherwise "xmp" is rendered like "pre".
否则“xmp”会像“pre”一样呈现。
回答by Alberto Cerqueira
Try:
尝试：
<xmp></xmp>
for exemple:
举个例子：
<pre>
<xmp><!-- your html code --></xmp>
</pre>
bye
再见
回答by Vivek Kalyanarangan
回答by Collarbone
Try CodeMirror (https://codemirror.net/)
试试 CodeMirror ( https://codemirror.net/)
It's a lightweight library that styles code in HTML. Here's a screenshot of what I'm referring to:
它是一个轻量级的库，可以在 HTML 中设置代码样式。这是我所指内容的屏幕截图：
Worked well for us!
为我们工作得很好！
回答by Kwilver Bear
Maybe not the best answer, but you can do something like this:
也许不是最好的答案，但你可以这样做：
<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>回答by Hirok Banik
This can be easily achieved with a little bit of javascript.
这可以通过一点点 javascript 轻松实现。
document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);
Run snippet below to see it in action:
运行下面的代码片段以查看它的运行情况：
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>回答by Lucien Albert
Use this:
用这个：
<pre>
<?= htmlentities($script) ?>
</pre>
回答by PanicBus
Yes, with an escape xml function. You'll need to have jQuery enabled for it to work though.
是的，带有转义 xml 功能。不过，您需要启用 jQuery 才能使其工作。
<pre>
${fn:escapeXml('
<!-- all your code -->
')};
</pre>
