首先，我们需要一个库，本页面使用的是highlight.js库(一款轻量级的 Web 代码语法高亮库)，支持几种语法180多种语法，使用简单、方便。
如果想限制高度的话可以改成下面形式：
<code style="max-height: 300px;"> 注：如需要显示HTML或PHP高亮代码需使用转换工具，点此链接，点击“Escaped HTML”即可
更多样式请自行参阅highlight.js – Github
使用示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code class="html">
你的代码
</code></pre>
</body>
</html>
声明：
本网站（灵矽矽，www.coolcpt.cn）为非盈利性个人技术分享平台。
1. 原创内容：本站所有标注“原创”的教程/文章，著作权均归本站所有。**未经书面授权，禁止任何形式的转载、复制或用于商业用途。
2. 第三方资源：站内引用的软件/资源均来自互联网公开渠道，**仅限用于《计算机软件保护条例》规定的“学习研究”目的。
3. 责任须知：用户使用本站内容需自行承担风险，违反本声明导致的版权纠纷或损失，由使用者全权负责。
【免责声明】
本网站（灵矽矽，www.coolcpt.cn）为非盈利性个人技术分享平台。
1. 原创内容：本站所有标注“原创”的教程/文章，著作权均归本站所有。**未经书面授权，禁止任何形式的转载、复制或用于商业用途。
2. 第三方资源：站内引用的软件/资源均来自互联网公开渠道，**仅限用于《计算机软件保护条例》规定的“学习研究”目的。
3. 责任须知：用户使用本站内容需自行承担风险，违反本声明导致的版权纠纷或损失，由使用者全权负责。
【免责声明】