要在 HTML 中实现源码的语法高亮显示，可以使用以下两种方法：
代码高亮库可以自动将源代码转换成带有颜色的 HTML 标签，从而实现高亮显示。常用的代码高亮库有 Prism、highlight.js、CodeMirror 等。使用时需要引入对应的 js 和 css 文件，并在页面中使用对应的标签包裹代码，例如：
<!-- 引入 Prism 的 css 文件 -->
<link href="path/to/prism.css" rel="stylesheet" />
<!-- 使用 pre 和 code 标签包裹代码，class 属性为 "language-语言名称" -->
<pre><code class="language-javascript">
// 这里是 JavaScript 代码
</code></pre>
<!-- 引入 Prism 的 js 文件 -->
<script src="path/to/prism.js"></script>如果不想使用代码高亮库，也可以通过 CSS 的样式实现代码高亮。在样式中设置代码块的字体、背景色、边框等属性，然后使用 pre 和 code 标签包裹代码即可。例如：
<style>
pre {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 14px;
line-height: 1.5;
background-color: #f5f7fa;
border: 1px solid #e1e5ee;
border-radius: 4px;
padding: 10px;
overflow-x: auto;
}
code {
color: #c7254e;
background-color: #f9f2f4;
padding: 2px 4px;
border-radius: 4px;
}
</style>
<pre><code>
// 这里是代码
</code></pre>以上两种方法都可以实现代码高亮，具体使用哪种方法取决于个人喜好和项目需求。