highlight.js 高亮代码行号从0开始计数解决方法

2023-12-07 09:37:30

一、背景

笔者在开发这套博客系统时使用Editormd作为Markdown编辑器，由于不满足其代码高亮的样式，因此选用highlight.js插件来实现代码高亮功能。但是，highlight.js插件不提供设置行号从1开始计数的功能，这导致代码行号从0开始计数，与一般的编程习惯不符。

二、解决方法

为了解决这个问题，我们可以通过修改highlight.js的源代码来实现行号从1开始计数。具体步骤如下：

下载highlight.js的源代码。
打开highlight.js源代码中的“highlight.pack.js”文件。
找到以下代码：

function numberLines(lines, opts) {
  var html = '';
  for (var i = 0, len = lines.length; i < len; i++) {
    html += '<li data-rn="' + (i + 1) + '">' + lines[i] + '</li>';
  }
  return '<ol>' + html + '</ol>';
}

将上面的代码替换为以下代码：

function numberLines(lines, opts) {
  var html = '';
  for (var i = 1, len = lines.length; i <= len; i++) {
    html += '<li data-rn="' + i + '">' + lines[i] + '</li>';
  }
  return '<ol>' + html + '</ol>';
}

保存“highlight.pack.js”文件。
在你的网页中引用修改后的“highlight.pack.js”文件。

这样，highlight.js插件就会将代码行号从1开始计数了。

三、示例代码

以下是一个使用highlight.js插件将代码行号从1开始计数的示例代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="highlight/styles/default.css">
  <script src="highlight/highlight.pack.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</head>
<body>
  <h1>highlight.js 高亮代码行号从1开始计数</h1>
  <pre>
    <code class="javascript">
      // 代码示例
      console.log('Hello, world!');
    </code>
  </pre>
</body>
</html>