首页 文章

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

提问于
浏览 次
5

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

让我解释一下：我想 Build 一个讨论HTML的网页 . 因此会有类似的部分

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

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

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

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

html css tags

5 回答

  • 1

    您正在寻找SyntaxHighlighter . 见demo page here

    回复于
  • 1

    使用 <xmp> 标记而不是 <pre> .

    例如 .

    <xmp>

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

</xmp>
    回复于
  • 1

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

    回复于
  • 26

    关于转义字符，你需要转义的是“<”（如 &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>
    回复于
  • 0

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

    希望这可以帮助！

    回复于

相关问题