前端开发中，我们经常需要展示代码，而代码需要分行显示并且需要有行号。如果手动添加行号，那么对于长篇代码来说是十分繁琐的事情，所以我们可以使用 npm 包 linenum 来快速地添加行号。本篇文章将为大家介绍 npm 包 linenum 的使用教程，并为大家提供相关示例代码。
一、linenum 介绍
linenum 是一款可以为代码添加行号的 npm 包，它支持多种语言的代码，并且可以配置多种行号样式。使用它可以快速地给代码添加行号从而提高阅读和理解代码的效率。
二、安装 linenum
在使用 linenum 之前，我们需要先安装它。可以使用 npm 进行安装，具体命令如下：
npm install linenum --save
三、使用 linenum
1. 使用 linenum 的基础功能
使用 linenum 的基础功能非常简单，只需要在代码包裹层级内加上 data-linenum 属性即可。示例如下：
-- -------------------- ---- -------
---- -------------
------
----- ---------- - -- -- -
------------------ --------
-
-------------
-------
------上述代码中，我们在 pre 标签内添加了 data-linenum 属性，使得代码具有行号。代码渲染后的效果如下图所示：
2. 自定义行号样式
linenum 支持多种行号样式的配置，可以通过 CSS 来实现。
-- -------------------- ---- -------
-- ------- --
-------- -
-------------- -----
------ ---------------
------------- --- ----- ---------------
----------- ------
-
-- ------- --
------------------------- -
------------- -----
-我们创建了两个 CSS 类，一个是 .linenum 类，表示所有行号的通用样式，另一个是 .linenum[data-type="end"] 类，指定了某些特定行号的样式。其中，.linenum[data-type="end"] 类中的 data-type 属性指定了这些行号的类型为 end，这是因为 linenum 会将代码块按行号分为多个 span 标签。可以看下示例代码：
-- -------------------- ---- -------
---- -------------
------
----- ---------- - -- -- -
------------------ --------
-
-------------
-------
----- --------------- ------------- --------------------------
----- --------------- ------------- ------------------------
------上述代码生成的 HTML 结构如下：
-- -------------------- ---- -------
---- ----------------
----- --------------- ------------- --------------------------
------
----- ---------- - -- -- -
------------------ --------
-
-------------
-------
----- --------------- ------------- ------------------------
------在 HTML 结构中，每一个行号对应一个拥有 .linenum 类和 data-line 属性的 span 标签。通过根据这些 span 标签的 data-type 属性来设置不同的样式，并使用 CSS 来实现自定义行号样式。
3. 更多高级配置
除了基础功能和自定义行号样式外，linenum 还支持其他更多的高级配置，如自定义第一行行号，空行处理方式等。如果需要进行更多的自定义配置，可以查看官方文档：linenum 文档。
四、linenum 使用指导
在使用 linenum 时，我们可以在代码块的包裹层级内添加 data-linenum 属性来实现基础行号功能，并通过 CSS 来自定义行号的样式。如果需要更多高级配置，可以查看官方文档来进行更多的自定义设置。
使用 linenum 不仅可以使代码更加清晰易读，也有助于提高代码的阅读效率。同时，linenum 的配置也相对简单，是我们在代码展示和分享时必备的工具之一。
五、示例代码
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- ---------------- ---------------- ------------------
-------------------
-------
-- ------- --
-------- -
-------------- -----
------ ------- -- -- ----
------------- --- ----- ------- -- -- ----
----------- ------
-
-- ------- --
------------------------- -
------------- -----
-
--------
-------
------
---- -------------
------
----- ---------- - -- -- -
------------------ --------
-
-------------
-------
----- --------------- ------------- --------------------------
----- --------------- ------------- ------------------------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72336