关于如何在网页上显示/呈现 HTML 标签的想法答案

【问题标题】：Ideas on how to display/present HTML tags on a webpage关于如何在网页上显示/呈现 HTML 标签的想法
【发布时间】：2012-01-16 14:51:58
【问题描述】：

有没有办法将 HTML 写入网页，但将其呈现为文本？

让我解释一下：我想建立一个网页，讨论 HTML。因此会有类似的部分

<div>
    <p>
        <span>Hello world</span>
    </p>
</div>

我希望使用缩进正确格式化，甚至可能有不同颜色方案的标签。

我完全知道我可以自己为此编写样式，但肯定有人已经编写并提供了样式表、LESS mixin 或可能为我识别和格式化的 jQuery 插件？

更新：为了让人们知道，我意识到我必须对标签（< 和 >）进行 HTML 编码。但这对格式/演示没有帮助，我正在寻求帮助的正是格式/演示。

【问题讨论】：

> = > echo htmlspecialchars('your html here');
并使用
```
 
```
进行缩进

标签： html css tags

【解决方案1】：

使用<xmp> 标签代替<pre>。

例如

<xmp>

<html>
<body>This is my html inside html.</body>
</html>

</xmp>

【讨论】：

如您所见，标签为红色，文本为黑色，如何做到这一点..？
请注意，xmp 已过时，已从 HTML5 中删除：developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp
虽然在不鼓励使用的意义上已经过时，但 pre、code 或其他类似标签都没有达到相同的效果，并且在撰写本文时 xmp 至少在 Firefox 和 Chrome 中仍然有效。如果您想要一个文件，您可以查看自己（即未转义的标签）在页面上呈现为 html，xmp 会这样做，而其他建议的替代方案都不会。

【解决方案2】：

您需要将转换为 HTML entities。

&lt;div&gt;
    &lt;p&gt;
        &lt;span&gt;Hello world&lt;/span&gt;
    &lt;/p&gt;
&lt;/div&gt;

至于颜色编码，请查看Google Code Prettify。这里有一些examples。

【讨论】：

【解决方案3】：

您正在寻找 SyntaxHighlighter。见demo page here

【讨论】：

【解决方案4】：

关于转义字符，需要转义的是“<）和“&”（如&amp;）。如果您使用自动化工具，请确保它们能够处理这些字符。

要保留格式（换行符和间距），您可以使用<pre> 标记。最好使第一行在<pre> 标记之后立即开始（在同一行），最后一行立即（不带换行符）紧跟在结束标记</pre> 之后。否则某些浏览器可能会显示额外的空行。

默认情况下，<pre> 标记意味着系统相关的等宽字体。这当然可以在 CSS 中更改。该标记还意味着在大多数浏览器上减小字体大小，大概是为了应对等宽字体的属性；因此，您可能希望将 font-size 设置为一个值（可能是 100%）以匹配您的设计。

或者，您可以将代码包装在任何块元素（如<div>）中，并在 CSS 中为其设置 white-space: pre。这意味着保留格式，但字体和大小与周围文本相同（除非您明确设置）。

您还可以使用<code> 标记将内容指示为计算机代码。它也将字体设置为等宽和缩小大小，但在其他方面纯粹是合乎逻辑的。如果您希望指明使用的语言，那么 class=language-html 将是 HTML5 草稿中建议的方式。这本身没有直接影响；它只是让您更容易统一地设置 HTML 代码示例的样式，并在需要时在 JavaScript 处理中识别它们。

例子：

<pre><code class=language-html>&lt;div>
    &lt;p>
        &lt;span>Hello world&lt;/span>
    &lt;/p>
    &lt;/div></code></pre>

【讨论】：

【解决方案5】：

如上所述，使用 HTML 字符显示 HTML 的演示总是一个好主意，因此请始终使用 **&lt;** 表示和 **&gt;** 表示 或者，如果您想对目标用户更有帮助，那么您可以使用代码荧光笔，例如 Code Highlighter

希望这会有所帮助！

【讨论】：