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

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

我怎样才能实现所希望的行为我网页。我感谢大家的努力。

来源

2016-06-13 Code Hungry

为什么你不把截图从编辑器中嵌入到你的代码中？ –

@RachelGallen - 因为代码的图片很糟糕。他们遭受压缩伪影。不能整洁地缩放。大量使用更多的带宽。屏幕阅读器不可见。无法复制/粘贴。 – Quentin

最简单的方法来做到这一点，并有HTML显示为您的网页上的实际内容是通过包装你想在'<前>'标签内显示的HTML标记。

那么你就需要使用HTML实体，以显示你所需要的特殊字符，开括号是

&lt;

和右括号是

&gt;

你也可以使用一个插件以帮助您使代码看起来更加美观，例如语法突出显示等等。一个相当不错的javascript插件可以在这里找到http://prismjs.com/

来源

2016-06-13 12:07:12 JustSomeDude

如何将此插件添加到我的网页？ –

@CodeHungry您可以访问Prism JS网站，他们有一个下载页面来下载任何您需要的Prism JS主题。然后，您只需将Prism JS css和javascript文件添加到您的网站。在Prism JS网站的主页底部，有关于如何编写和使用Prism JS的教程链接。 – JustSomeDude

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

使用<pre>表明，白色空间显著
使用单位对有特殊意义的HTML字符（例如<）
使用<code>来标记代码（例如<code class="html tag start-tag"><title></code>）。

将CSS应用于所需的颜色。 <code>元素给你一些东西来定位。

来源

2016-06-13 11:56:50 Quentin

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

回答

相关问题