如何在格式化的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>
我怎样才能实现所希望的行为我网页。我感谢大家的努力。
最简单的方法来做到这一点,并有HTML显示为您的网页上的实际内容是通过包装你想在'<前>'标签内显示的HTML标记。
那么你就需要使用HTML实体,以显示你所需要的特殊字符,开括号是
<
和右括号是
>
你也可以使用一个插件以帮助您使代码看起来更加美观,例如语法突出显示等等。一个相当不错的javascript插件可以在这里找到http://prismjs.com/
如何将此插件添加到我的网页? –
@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>
元素给你一些东西来定位。
为什么你不把截图从编辑器中嵌入到你的代码中? –
@RachelGallen - 因为代码的图片很糟糕。他们遭受压缩伪影。不能整洁地缩放。大量使用更多的带宽。屏幕阅读器不可见。无法复制/粘贴。 – Quentin