如何以格式化的方式在html页面中显示html代码[重复]答案

【问题标题】：How to display html code in a html page in a formatted manner [duplicate]如何以格式化的方式在html页面中显示html代码[重复]
【发布时间】：2023-03-21 07:19:01
【问题描述】：

我的网站是一个简单的教育网站。我想以一种格式化的方式在我的网页中显示 HTML 代码，就像它们在编辑器中一样。我的意思是说 HTML 标签应该以与剩余文本等不同的颜色显示。这是来自另一个网站的代码 sn-p。我想要这样的网页输出：

这是我的代码：-

<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>

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

【问题讨论】：

为什么不直接从编辑器截取屏幕截图并将它们嵌入到您的代码中？
@RachelGallen — 因为代码图片很糟糕。他们遭受压缩伪影。不能干净地缩放。使用更多的带宽。屏幕阅读器看不到。无法复制/粘贴。

标签： html formatting

【解决方案1】：

实现这一点并让 HTML 在您的网页上显示为实际内容的最普通方法是将您想要显示的 HTML 标记包装在“

”标签内。

然后你需要使用 HTML 实体来显示你需要的特殊字符，一个左括号是

&lt;

右括号是

&gt;

您还可以使用插件来帮助使您的代码看起来更漂亮，例如语法高亮等等。一个不错的 javascript 插件可以在这里找到http://prismjs.com/

【讨论】：

如何将此插件添加到我的网页？
@CodeHungry 你可以去 Prism JS 网站，他们有一个下载页面来下载你想要的任何 Prism JS 主题。然后，您只需将 Prism JS css 和 javascript 文件添加到您的网站。在 Prism JS 网站主页的底部有关于如何准确编码和使用 Prism JS 的教程链接。

【解决方案2】：

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

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

为您想要的颜色应用 CSS。 <code> 元素为您提供了目标。

【讨论】：

【解决方案3】：

如果您按照@JustSomeDude 的建议使用Prism，您可能需要使用Unescaped Markup 插件，这样您就不需要使用&lt; 等特殊字符来显示您的HTML 标记。

【讨论】：