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

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

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

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

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

  
      pre {
          position: relative;
          margin-bottom: 24px;
          border-radius: 3px;
          border: 1px solid #C3CCD0;
          background: #FFF;
          overflow: hidden;
      }
  
      code {
          display: block;
          padding: 12px 24px;
          overflow-y: auto;
          font-weight: 300;
          font-family: Menlo, monospace;
          font-size: 0.8em;
      }
  
      code.has-numbering {
          margin-left: 21px;
      }
  
      .pre-numbering {
          position: absolute;
          top: 0;
          left: 0;
          width: 20px;
          padding: 12px 2px 12px 0;
          border-right: 1px solid #C3CCD0;
          border-radius: 3px 0 0 3px;
          background-color: #EEE;
          text-align: right;
          font-family: Menlo, monospace;
          font-size: 0.8em;
          color: #AAA;
      }
  
  
  
   
      hljs.highlightAll();
      $(function () {
          $('pre code').each(function () {
              var lines = $(this).text().split('n').length - 1;
              var $numbering = $('
  ').addClass('pre-numbering');
              $(this)
                  .addClass('has-numbering')
                  .parent()
                  .append($numbering);
              for (i = 1; i <= lines; i++) {
                  $numbering.append($('
  ').text(i));
              }
          });
      });
  
  
  
  
      
      
  
  
      
  测试页面
  
  
  
  此代码使用了jQuery简化DOM操作，当然也可以用纯JavaScript实现。  它先加载Highlight.js和jQuery，然后遍历代码行数，动态创建行号列表并添加到代码块中。 CSS样式控制行号的样式和位置，最终实现为Highlight.js高亮的代码添加行号。
  
  以上就是使用Highlight.js高亮显示代码时，如何为其添加行号？的详细内容，更多请关注昆居客【www.kunjuke.com】。