如何在向 html 源代码添加行号时，使用 highlight.js

使用 Highlight.js 能够让你给代码块添加行号，但你需要执行一些额外步骤。

正确的方法：

将以下样式添加到你的 <head> 标签中：

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

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;
}

然后，在 HTML 中，将 class="html" 添加到你的代码块中，并在代码块的父标签的末尾添加以下代码：

立即学习“前端免费学习笔记（深入）”；

$(function () {
  $('pre code').each(function () {
    var lines = $(this).text().split('\n').length - 1;
    var $numbering = $('<ul/>').addClass('pre-numbering');
    $(this)
      .addClass('has-numbering')
      .parent()
      .append($numbering);
    for (i = 1; i <= lines; i++) {
      $numbering.append($('<li/>').text(i));
    }
  });
});

这样，你的代码块就会带有数字行号。