如何使 html 忽略作为文本一部分的代码？答案

【问题标题】：How to make html ignore code that is part of text?如何使 html 忽略作为文本一部分的代码？
【发布时间】：2011-07-09 05:06:06
【问题描述】：

我需要在我的 html 文档中包含一些代码

我尝试了<pre> 标签，但没有帮助。

如何将此代码放入文本之类的文档中？

谢谢

【问题讨论】：

标签： html

【解决方案1】：

简答。

使用在线HTML Encoder 对您的代码进行编码，然后将其放入pre

<pre>
    <%--your encoded code goes here--%>
</pre>

长答案。

以上内容只会帮助您展示您的代码。如果您想正确突出显示代码，请尝试 SyntaxHighlighter

链接：How to use SyntaxHighlighter.

【讨论】：

对不起，naveen，但在大多数情况下，pre 标签默认具有 css 样式。因此，如果您仅使用它来使 html 忽略文本中的标签，则整个块都会获得不需要的样式。我想这会导致投票失败。
我做到了，但问题是“如何使 html 忽略作为文本一部分的代码？”。 “部分文本”对我来说意味着简单的复制文本。例如：“Hello world，我经常使用
标签。”以这种方式解释，您的两个答案都没有为在“忽略文本中的 html 标签”之后搜索的人提供完全预期的快速解决方案。
带有 SyntaxHighlighter 的 pre 标记仍然需要将

【解决方案2】：

使用xmp 标签。它比使用 HTML 编码器更容易、更快捷。示例：

<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
<xmp>
<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
</xmp>

【讨论】：

你不应该在 2020 年使用它。xmp 自 HTML 3.2（1997 年发布）以来已被弃用。
@zsolt 但它仍然是一个选项

【解决方案3】：

你必须使用html entities。示例：

<div>
   Some Stuff
</div>

应该是

&lt;div&gt;
   Some Stuff
&lt;/div&gt;

它将呈现为第一个

【讨论】：

【解决方案4】：

您可以使用<pre> 标签。每次您在 <pre> 标记中插入任何文本时，它都不会被解析为 html 文档。不过需要注意的是，如果您尝试在 pre 标记中放置一个 HTML 开头标记，则必须这样做：

<pre>
     &lt;TEST>
            TEST!!
     &lt;/TEST>
</pre>

【讨论】：

【解决方案5】：

您可以使用<pre> 和<code> 标记的组合。 <pre> 标签保留格式，<code> 标签以等宽字体输出。将<code> 标记包装在<pre> 标记中，并将任何代码块粘贴到<code> 元素主体中。这将输出如下：

<pre> <code> function(){ var myVar = "This is code"; return myVar; } </code> </pre>

【讨论】：

这不适用于 HTML 标签。标签本身必须被转义。

【解决方案6】：

有些人可能会把我钉在十字架上而不是逃避我的代码。但这对我有用。

CSS

.tag:before{
content: '<'
}
.tag:after{
content: '>'
}

HTML

<pre>
<span class="tag">tag</span>
</pre>

<!--Instead of having to escaping all the character-->
&lt;tag&gt; &lt;&#47;tag&gt;

<!--Kinda interested to see why this is bad. I understand that not escaping  code can be dangerous b/c of SQL injections and all sort of BS but why is this  not a viable option-->

【讨论】：

【解决方案7】：

使用 encode

例子：

<br> -> encoded -> &lt;br&gt;

use &lt;br&gt; in your text

与 Ibu 的答案相同，但也许您想要一种快速编码标签的方法。

【讨论】：

【解决方案8】：

要完全不转义任何字符，您可以使用 textarea：

textarea {
  font-family: inherit;
  font-size: inherit;

  border: none;
  background-color: transparent;
  resize: none;
  outline: none;
}

<div>In order to show a bullet point in html use the li tags:</div>
<div>
  <textarea readonly><li>Hello</li></textarea>
</div>
<div>And this is what it will look like:</div>
<li>Hello</li>

运行 sn-p 并注意

和

标记逐字呈现，而不是被转换为项目符号。

现在我们为什么需要 CSS 和额外的 HTML 标签和属性？

CSS 删除了 textarea 中的所有样式，因为 textarea 通常包括边框样式、调整夹子大小以及使用“输入”样式字体。 textarea 标签需要“只读”属性，因此用户无法对其进行编辑。 textarea 周围的额外 div 标签使 textarea 更正确地插入到文档流中。

它有一些额外的步骤，它会显着改变 DOM，但如果你真的需要严格显示文本而不出于任何原因转义任何字符。

【讨论】：