如何使用 Highlight.js 在 HTML 代码块中添加行号?

珍惜时间，勤奋学习！今天给大家带来《如何使用 Highlight.js 在 HTML 代码块中添加行号? 》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

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

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

正确的方法：

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

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="language-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));
    }
  });
});

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。