如何以格式化的方式在html页面中显示html代码 [英] How to display html code in a html page in a formatted manner
问题描述
我的网站是一个简单的教育网站.我想以格式化的方式在网页中显示HTML代码，就像在编辑器中一样.我的意思是说HTML标记应以与其余文本等不同的颜色显示.这是另一个网站的代码段.我想要这样的网页输出:
My website is a simple educational one. I want to display HTML code in my web page in a formatted way like they look in a editor. I mean to say the HTML tags should appear in a different color from remaining text etc. This is a code snippet from another website. I want the output of my web page like this:
这是我的代码:-
<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>
如何在网页中实现所需的行为.我感谢大家的努力.
How can I achieve desired behavior in my web page. I thank you all for your efforts.
推荐答案
最有效的方法是将HTML标记包装在要显示在'<内部的HTML标记中，以使HTML实际显示在网页上. pre> '标签.
The most vanilla way to do this and have HTML show up as actual content on your webpage is by wrapping you HTML markup you want to display inside of ' <pre> ' tags.
然后，您将需要使用HTML实体来显示所需的特殊字符，括号是
Then you would need to use HTML entities to show the special characters you need, an open bracket is
<
，右括号为
>
您还可以使用插件来帮助使代码看起来更好，例如语法突出显示等.在这里 http://prismjs.com/
You can also use a plug-in to help aid in making your code look nice, like for syntax highlighting and more. A pretty nice javascript plug-in can be found here http://prismjs.com/
这篇关于如何以格式化的方式在html页面中显示html代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
