在网页设计中，高亮显示代码是一种常见的需求，它可以帮助开发者和用户更清晰地识别和理解代码，HTML 本身并不直接支持代码高亮功能，但可以通过结合 CSS 和 JavaScript，或者使用现成的库来实现这一效果，本文将介绍几种实现 HTML 代码高亮的方法。
1、使用 CSS 自定义样式
你可以为 <code> 或 <pre> 标签创建自定义 CSS 样式，以实现代码高亮，这种方法适用于简单的代码展示，但可能需要手动设置每种语言的高亮规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 代码高亮</title>
<style>
code {
background-color: #f0f0f0;
color: #d73a49;
padding: 2px 4px;
border-radius: 4px;
font-family: 'Courier New', Courier, monospace;
}
pre code {
display: block;
padding: 10px;
overflow-x: auto;
}
</style>
</head>
<body>
<pre><code>
function sayHello() {
console.log('Hello, World!');
}
</code></pre>
</body>
</html>
2、使用 Prism.js 库
Prism.js 是一个轻量级的、支持多种编程语言的代码高亮库，它通过 CSS 文件为不同语言的代码提供高亮样式，同时使用 JavaScript 来处理代码块。
你需要在 HTML 文件中引入 Prism.js 的 CSS 和 JavaScript 文件：
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/prism.min.js"></script>
使用 Prism.js 的类名来标记你的代码块：
<pre><code class="language-javascript">
function sayHello() {
console.log('Hello, World!');
}
</code></pre>
Prism.js 支持多种语言，只需在 class 属性中指定相应的语言即可。language-javascript 用于 JavaScript 代码。
3、使用 Highlight.js 库
Highlight.js 是另一个流行的代码高亮库，它同样支持多种编程语言，与 Prism.js 类似，你需要引入 Highlight.js 的 CSS 和 JavaScript 文件：
<link href="https://cdn.jsdelivr.net/npm/highlight.js@11.5.1/styles/default.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.5.1/highlight.min.js"></script>
在页面加载完成后，使用 JavaScript 初始化 Highlight.js：
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
同样使用类名来标记代码块：
<pre><code class="javascript">
function sayHello() {
console.log('Hello, World!');
}
</code></pre>
本文介绍了三种实现 HTML 代码高亮的方法：使用 CSS 自定义样式、Prism.js 库和 Highlight.js 库，每种方法都有其优缺点，你可以根据项目需求和个人喜好选择合适的方法，对于简单的代码展示，自定义 CSS 样式可能已经足够，而对于需要支持多种编程语言的复杂项目，使用 Prism.js 或 Highlight.js 库会更加方便。