HighlightJS 为 HTML 代码添加行号的方法

在网页开发和代码展示过程中，为代码添加行号能够极大地方便开发者阅读和定位代码，HighlightJS 是一款强大的代码高亮工具，同时也支持为 HTML 代码添加行号。下面就为大家详细介绍具体方法。

确保已经引入了 HighlightJS 库。可以通过官方网站下载，也可以使用包管理工具，如 npm 进行安装。将下载好的库文件放置在项目合适的目录下，并在 HTML 文件中正确引入 CSS 和 JavaScript 文件，这样 HighlightJS 才能正常工作。

接着，要对 HTML 代码进行标记以便 HighlightJS 识别。在包含代码的元素上添加相应的类名，例如，如果代码写在

 标签内，可以添加 “hljs” 类，像这样：
你的代码
。这样 HighlightJS 就能自动识别并对代码进行高亮处理。

为代码添加行号相对来说也并不复杂。一种简单的方式是使用 CSS 样式来实现。在 CSS 文件中，为 “.hljs” 类或者包含代码的父元素添加如下样式：
.hljs {
    counter-reset: line;
}
.hljs li {
    counter-increment: line;
}
.hljs li:before {
    content: counter(line);
    display: inline-block;
    width: 1em;
    margin-right: 0.5em;
    text-align: right;
    color: #999;
}

上述代码利用 CSS 的计数器属性，首先重置一个名为 “line” 的计数器，然后在每个列表项（代码行）上递增计数器，并在每行代码前显示计数器的值，从而实现了行号的显示。
另外，HighlightJS 本身也提供了一些配置选项来处理行号。在引入 HighlightJS 的 JavaScript 文件后，可以通过如下方式进行配置：
hljs.initHighlightingOnLoad();
hljs.configure({
    // 配置行号相关
    languages: ['html'],
    useBR: true,
    tabReplace: '    ',
    lineNumbers: true
});

在这个配置中，“lineNumbers: true” 开启了行号显示功能。根据实际需求，还可以对其他参数进行调整，以达到最佳的代码显示效果。
通过上述方法，就能轻松地使用 HighlightJS 为 HTML 代码添加行号，提升代码的可读性和可维护性，无论是在个人项目文档中，还是在展示代码示例的网页上，都能发挥重要作用。