Question

我的网站是一个简单的教育网站。我希望以格式化的方式在我的网页中显示HTML代码，就像它们在编辑器中一样。我的意思是说HTML标签应该以与剩余文本等不同的颜色显示。这是来自其他网站的代码片段。我希望我的网页输出如下：

这是我的代码： -

＆＃13;

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

＆＃13;

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

Answer 1

最常用的方法是将HTML显示为网页上的实际内容，方法是将您要显示的HTML标记包装在＆＃39;内。＆LT;预＆GT; ＆＃39;标签。

然后你需要使用HTML实体来显示你需要的特殊字符，开放式括号是

&lt;

和结束括号是

&gt;

您还可以使用插件来帮助您使代码看起来更好，例如语法突出显示等。可以在http://prismjs.com/

找到一个非常好的javascript插件

Answer 2

使用适当的HTML标记。不要使用<xmp>，而不是HTML。

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

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

Answer 3

如果您按照@JustSomeDude的建议使用Prism，则可能要使用Unescaped Markup插件，这样就不必使用<这样的特殊字符来显示HTML。标签。

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

3 个答案: