在网页中展示代码并添加行号，能显著提升代码的可读性和调试效率。highlight.js是一个优秀的代码高亮库，但它本身不具备行号显示功能。本文将指导您如何结合highlight.js、自定义css和javascript代码，轻松实现html代码的行号显示。
开发者经常遇到的问题是：使用Highlight.js高亮HTML代码后，无法自动添加行号。这是因为Highlight.js需要手动添加行号功能。
解决方案是利用JavaScript动态生成行号，并将其插入代码块中。具体步骤如下：
首先，确保已正确引入Highlight.js的CSS和JavaScript文件。 核心在于添加自定义CSS样式和JavaScript代码来生成和显示行号。
自定义CSS样式用于控制代码块和行号的样式，包括位置、颜色、字体等，确保行号与代码整齐美观地排列。例如，pre元素使用相对定位，pre-numbering元素则绝对定位于代码块左侧；code.has-numbering类调整代码块的左内边距，为行号预留空间。
立即学习“前端免费学习笔记（深入）”；
JavaScript代码的核心逻辑是遍历代码块的每一行，动态生成<span></span>元素作为行号，并将其添加到一个容器元素中。该容器使用pre-numbering类进行样式控制，并作为代码块的兄弟元素插入DOM树。使用jQuery库可以简化DOM操作。 修改后的代码包含必要的CSS和JavaScript，并使用$(function () { ... });确保代码在DOM加载完成后执行，从而保证行号能正确添加到已渲染的代码块中。 这段JavaScript代码遍历每个<pre class="brush:php;toolbar:false;"></pre>标签下的<code>标签，计算代码行数，并动态创建一个包含行号的<ul></ul>元素。请注意，此方法依赖于jQuery库，请确保已正确引入。
通过以上步骤，即可为Highlight.js高亮的代码添加行号，显著提升代码的可读性。
