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

有没有办法将HTML写入网页，但将其呈现为文本？关于如何在网页上显示/呈现HTML标签的想法

让我解释一下：我想建立一个网页，并讨论HTML。因此会出现像

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

部分，我想这与缩进格式正确的，甚至在不同的配色方案的标签。

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

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

来源

2011-12-09 awj

> = > <= <或php：'回声用htmlspecialchars（的html这里'）;' – Yoshi

和使用

进行缩进 – ptriek

您正在寻找SyntaxHighlighter。见demo page here

来源

2011-12-09 09:27:34 robasta

您需要将<和>转换为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。

来源

2011-12-09 09:25:47 bookcasey

正如上面我总是使用HTML字符显示HTML的示范因此请务必使用**<**为<和**>**为<一个好主意，或者如果你想多一点有益的给你的目标用户，那么你可以使用代码荧光笔，如Code Highlighter

希望这会有所帮助！

来源

2011-12-09 09:28:06

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

要保留格式（换行符和间距），可以使用<pre>标记。这是最好的使用，以便第一行立即开始（在同一行）<pre>标签后，最后一行立即（没有换行符），后面跟着结束标记</pre>。否则，某些浏览器可能会显示多余的空行。

<pre>标记暗示默认情况下依赖于系统的等宽字体。这当然可以在CSS中进行更改。标记也意味着在大多数浏览器上减小字体大小，这大概是为了处理等宽字体的属性;因此您可能希望将字体大小设置为一个值（可能是100％）以符合您的设计。

或者，您可以将代码封装在任何块元素（如<div>）中，并在CSS中为其设置空白：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>

来源

2011-12-09 11:11:49

使用<xmp>标签，而不是<pre>。

例如

<xmp> 

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

</xmp>

来源

2013-06-01 02:14:42 fuzzyanalysis

这真的为我工作..十分感谢 – Chella

正如你看到的标签在红色和黑色文字怎么做..？ –

请注意，'xmp'已过时，并已从HTML5中删除：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp –

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

回答

相关问题