npm 包 highlightjs-line-numbers.js 使用教程

简介

highlightjs-line-numbers.js 是一个用于在代码高亮显示中添加行号的 JavaScript 库，它结合了 highlight.js 库和 line-numbers.js 库。

highlight.js 可以对代码进行高亮显示，而 line-numbers.js 则可以为每一行添加行号。将它们组合起来，就可以很方便地实现带有行号的代码高亮显示。

本文将介绍 highlightjs-line-numbers.js 的安装、配置和使用方法，并提供示例代码。

安装

你可以通过 npm 进行安装：

npm install highlightjs-line-numbers.js

或者通过 yarn 进行安装：

yarn add highlightjs-line-numbers.js

配置

在使用 highlightjs-line-numbers.js 之前，我们需要先引入必要的文件。

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github.min.css">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/styles/line-numbers.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>

以上代码中，第一行引用了 highlight.js 的样式文件，第二行引用了 line-numbers.js 的样式文件，第三行引用了 highlight.js 的 JavaScript 文件，第四行引用了 highlightjs-line-numbers.js 的 JavaScript 文件。

在引入必要的文件之后，我们需要初始化 highlight.js 和 highlightjs-line-numbers.js。

hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();

以上代码中，第一行初始化了 highlight.js，第二行初始化了 highlightjs-line-numbers.js。这样，每次加载页面时，都会自动对所有代码块进行高亮显示和添加行号。

使用

在 HTML 中使用 highlightjs-line-numbers.js 只需在 <pre> 标签中加入相应的语言类名即可。

<pre><code class="html">
  &lt;body&gt;
    &lt;p&gt;Hello, World!&lt;/p&gt;
  &lt;/body&gt;
</code></pre>

上述示例代码使用了 html 类名来指定要高亮显示的语言类型。

如果想要添加行号，只需在 <pre> 标签中加入 line-numbers 类名即可。

<pre><code class="html line-numbers">
  &lt;body&gt;
    &lt;p&gt;Hello, World!&lt;/p&gt;
  &lt;/body&gt;
</code></pre>

上述示例代码中，html 类名仍然用于指定要高亮显示的语言类型，而 line-numbers 类名则用于添加行号。

示例代码

下面是一个完整的示例，包括 HTML、CSS 和 JavaScript：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ---------------------------------- ------------
  ----- ----------------
        ------------------------------------------------------------------------------
  ----- ----------------
        -------------------------------------------------------------------------------------------------------
  ------- -------------------------------------------------------------------------------------
  ------- -------------------------------------------------------------------------------------------------------------------
  -------
    --- -
      ------- --- ----- -----
      -------- -----

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------