Question

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

让我解释一下：我想建立一个讨论HTML的网页。因此会有像

这样的部分

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

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

我完全清楚自己可以自己编写样式，但是肯定有人已经编写并提供了样式表，LESS mixin，或者是一个可以识别和格式化的jQuery插件吗？

更新：只是为了让人们意识到，我意识到我必须对标签进行HTML编码（＆amp; lt;和＆amp; gt;）。但这对格式化/演示文稿没有帮助，而且我正在寻求帮助的格式/演示文稿。

Answer 1

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

E.g。

<xmp>

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

</xmp>

Answer 2

你需要转换＆lt;和＆gt;到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。

Answer 3

您正在寻找SyntaxHighlighter。见demo page here

Answer 4

关于转义字符，你需要转义的是“＆lt;”（如<）和“＆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>

Answer 5

如上所述，使用HTML字符显示HTML的演示总是一个好主意，因此始终使用**<**用于＆lt; 和**>**用于＆lt; 或者如果您希望对目标用户更有帮助，那么您可以使用代码突出显示器，例如Code Highlighter

希望这有帮助！

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

5 个答案: