如何以格式化的方式在HTML页面中显示HTML代码

Question

如何以格式化的方式在HTML页面中显示HTML代码

3

我的网站是一个简单的教育类网站。我希望以编辑器中的样式格式化显示HTML代码在我的网页上。我的意思是说，HTML标签应该以不同的颜色出现，与其他文本区分开来等。这是另一个网站的代码片段。我希望我的网页输出也像这样：

这是我的代码：

<html>

<head>
    <title>HTML Tutorial</title>
</head>

<body>
    <div class="code">
        <xmp>
            <!DOCTYPE html>
            <html>

            <head>
                <title>HTML Tutorial</title>
            </head>

            <body>
                This is a simple HTML page
            </body>

            </html>
        </xmp>
    </div>
</body>

</html>

我如何在我的网页中实现所需的行为。感谢大家的努力。

- Code Hungry

你为什么不直接从编辑器中截屏并将它们嵌入到你的代码里呢？ - Rachel Gallen

2

@RachelGallen — 因为代码图片很糟糕。它们会受到压缩伪像的影响。无法干净地进行缩放。使用的带宽要多得多。对于屏幕阅读器来说是不可见的。无法复制/粘贴。 - Quentin

3个回答

2

请使用适当的HTML标记。不要使用不在HTML中的<xmp>。

使用<pre>表示空格的重要性
对于在HTML中具有特殊含义的字符（例如，<），请使用实体
使用<code>标记代码（例如<code class="html tag start-tag"><title></code>）。

应用CSS以获得所需的颜色。 <code>元素可以被选择作为目标。

- Quentin

0

如果您像@JustSomeDude建议的那样使用Prism，您可能希望使用“未转义标记”插件，这样您就不需要使用特殊字符（如<）来显示HTML标记。

- Margotte

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Russell Jonakin · Accepted Answer

如果你想在网页上展示HTML内容，最基本的方法是用'<pre>'标签包裹你想要展示的HTML标记。

接着，你需要使用HTML实体来显示所需的特殊字符，例如左尖括号可以写作'<'。

&lt;

闭合括号是

&gt;

您还可以使用插件来帮助改善代码的外观，例如语法高亮等。一个非常好用的JavaScript插件可以在这里找到：http://prismjs.com/