使用Highlight.js高亮显示代码时，如何为其添加行号？

Highlight.js本身不具备添加行号的功能，需要借助CSS和JavaScript实现。本文将详解如何为Highlight.js高亮的HTML代码添加行号，并解释此前未能成功添加的原因。

问题根源在于Highlight.js缺乏内置行号支持，需手动添加。解决方案是通过JavaScript动态生成行号，并用CSS控制其样式和位置。 我们需要创建一个

元素来容纳行号，然后用JavaScript遍历代码行，为每个
• 元素添加对应的行号。 同时，CSS样式确保行号与代码块对齐。

  以下是一个改进后的代码示例，包含必要的CSS和JavaScript代码：

  
  
  
   
  
  
  
  
      
      
  
  
      
  测试页面
  
  
  
  
  此代码使用了jQuery简化DOM操作，当然也可以用纯JavaScript实现。  它先加载Highlight.js和jQuery，然后遍历代码行数，动态创建行号列表并添加到代码块中。 CSS样式控制行号的样式和位置，最终实现为Highlight.js高亮的代码添加行号。

  来源：1741369425