在网页中展示代码并添加行号，能显著提升代码的可读性和调试效率。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类调整代码块的左内边距，为行号预留空间。
1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全
立即学习“前端免费学习笔记（深入）”；
JavaScript代码的核心逻辑是遍历代码块的每一行，动态生成元素作为行号，并将其添加到一个容器元素中。该容器使用pre-numbering类进行样式控制，并作为代码块的兄弟元素插入DOM树。使用jQuery库可以简化DOM操作。 修改后的代码包含必要的CSS和JavaScript，并使用$(function () { ... });确保代码在DOM加载完成后执行，从而保证行号能正确添加到已渲染的代码块中。 这段JavaScript代码遍历每个标签下的标签，计算代码行数，并动态创建一个包含行号的
通过以上步骤，即可为Highlight.js高亮的代码添加行号，显著提升代码的可读性。
