在我们开发前端项目时，经常需要对列表或者代码进行编号，其中一个方便的工具是 numbered 这个 npm 包。本文将会介绍如何使用该包来快速地实现列表和代码的编号。
安装
在命令行中输入以下命令即可安装 numbered：
npm install numbered --save-dev
列表的编号
在 HTML 中，我们可以使用 <ol> 和 <li> 标签来表示有序列表。使用 numbered 可以让我们更加方便地为这些列表项进行编号。
首先，在我们的 JavaScript 文件中引入 numbered 包：
const numbered = require('numbered');
接下来，我们可以使用 numbered.ol() 来给我们的有序列表添加编号。具体示例如下所示：
-- -------------------- ---- ------- --- ------------ ------------ ------------ ------------ ----- -------- ----- ------ - ---------------------------------- -------------------- ---------展开代码
上述代码中，我们首先通过 document.getElementById() 获取到了我们希望进行编号的有序列表。然后，我们调用了 numbered.ol(myList) 来为这个列表添加编号。
如果我们想要自定义编号的格式，我们可以传递一个选项对象给 numbered.ol() 。例如：
numbered.ol(myList, {format: 'A、B、C'});
上述代码中，我们将编号的格式设置为了大写字母 + 中文顿号。
代码的编号
在编写代码时，我们也经常需要对代码进行编号以方便阅读。使用 numbered，我们可以轻松地实现这一点。
首先，我们需要将我们的代码块包裹在 <pre> 和 <code> 标签中：
<pre> <code> console.log('Hello, world!'); console.log('Bonjour, monde!'); console.log('你好，世界！'); </code> </pre>
接下来，在 JavaScript 文件中引入 numbered 包：
const numbered = require('numbered');
最后，我们调用 numbered.code() 来为我们的代码添加编号：
const codeBlock = document.getElementsByTagName('pre')[0]; numbered.code(codeBlock);
上述代码中，我们首先通过 document.getElementsByTagName() 获取到了我们希望进行编号的代码块。然后，我们调用了 numbered.code(codeBlock) 来为这个代码块添加编号。
如果我们想要自定义编号的格式，我们可以传递一个选项对象给 numbered.code() 。例如：
numbered.code(codeBlock, {format: '1.1.1'});
上述代码中，我们将编号的格式设置为了“主编号.子编号.子子编号”的格式。
总结
在本文中，我们介绍了如何使用 numbered 这个 npm 包来方便地为我们的列表和代码进行编号。使用 numbered，我们可以轻松地自定义编号的格式以适应不同的需求。希望本文可以对你在前端开发中使用 numbered 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39361
