Highlight.js 是一个用于在网页上高亮显示代码的 JavaScript 库。它本身并不直接支持为代码添加行号，但你可以通过一些额外的步骤来实现这个功能。以下是一个简单的示例，展示如何使用 Highlight.js 并结合一些额外的 HTML 和 CSS 来为代码添加行号。
首先，你需要在 HTML 文件中引入 Highlight.js 的 CSS 和 JavaScript 文件。
<!-- 引入 Highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<!-- 引入 Highlight.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
接下来，你可以创建一个带有行号的代码块。这里我们使用一个 <pre> 元素来包裹代码，并在其中使用 <span> 元素来显示行号。
<pre>
<code class="html">
<div class="line-numbers">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="code-content">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</div>
</code>
</pre>
为了让行号和代码内容正确显示，你需要添加一些 CSS 样式。
pre {
position: relative;
padding-left: 3.8em; /* 为行号留出空间 */
counter-reset: line;
}
.line-numbers {
position: absolute;
left: 0;
top: 0;
width: 3em; /* 行号宽度 */
text-align: right;
padding-right: 0.5em;
border-right: 1px solid #ccc;
user-select: none;
}
.line-numbers span {
display: block;
counter-increment: line;
}
.line-numbers span::before {
content: counter(line);
color: #999;
}
.code-content {
display: inline-block;
padding-left: 1em;
}
最后，你需要初始化 Highlight.js 来高亮显示代码。
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
将上述代码整合到一个 HTML 文件中，你将得到一个带有行号的代码高亮显示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight.js with Line Numbers</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<style>
pre {
position: relative;
padding-left: 3.8em;
counter-reset: line;
}
.line-numbers {
position: absolute;
left: 0;
top: 0;
width: 3em;
text-align: right;
padding-right: 0.5em;
border-right: 1px solid #ccc;
user-select: none;
}
.line-numbers span {
display: block;
counter-increment: line;
}
.line-numbers span::before {
content: counter(line);
color: #999;
}
.code-content {
display: inline-block;
padding-left: 1em;
}
</style>
</head>
<body>
<pre>
<code class="html">
<div class="line-numbers">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="code-content">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</div>
</code>
</pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
</body>
</html>
通过上述步骤，你可以使用 Highlight.js 并结合一些额外的 HTML 和 CSS 来为代码块添加行号。这种方法虽然简单，但可以满足大多数场景的需求。如果你需要更复杂的功能（如动态行号、代码折叠等），可能需要使用更高级的库或插件。