前言
在前端开发中，我们经常需要使用 markdown 语言来书写文档并显示在网页上。但是，有时候我们需要给某些标题添加 id 和 class，以方便后续的操作和渲染效果。markdown-it-named-headings 便是一个可以实现这种功能的 npm 包。
安装
使用 npm 安装 markdown-it-named-headings：
--- ------- -------------------------- ------
使用方法
在 Node.js 中引入该包：
----- ---- - --------------------------------------
然后在 markdown-it 中使用该插件：
----- -- - ------------------------
---------- -
-- ---
---配置项
markdown-it-named-headings 提供了一些配置项，以定制化生成的标题。
slugify
slugify 用于定义生成的 id，其默认值为：
-------- ---------- - ------ ----------------------------------------------------------------- ------ -
这段函数会把标题文本中的多余空格、大写字母都剔除掉，并且把空格转成短横线。
如果需要定制化 id 的生成方式，可以传入自定义的 slugify 函数：
----- -- - ------------------------
---------- -
-------- ----------- -
------ - - ----------------
-
---level
level 用于定义生成的标题级别，默认是从 h2 到 h6：
- --- ---------- --- ------------- --- ---------------- --- ------------------- --- --------------------- -
如果需要定制级别和对应的 class，可以传入自定义的 level 映射：
----- -- - ------------------------
---------- -
------ -
--- ----------
--- --------
--- --------
--- ------------
--- ---------------
-
---callback
callback 用于定义生成完毕后的回调函数。比如，可以用来增加一些特殊的操作，如跳转锚点等。默认回调函数为空函数。
----- -- - ------------------------
---------- -
--------- ----------- --------- ----- -
-- ---------
----- -- - --------------------
---------------------- -----------------------
-
---注意
需要注意的是，使用该插件生成的标题以及自定义的 class 都会被 markdown-it 转化成 HTML 标签。如果你需要对其进行修改，需要使用 DOM 操作，比如使用 jQuery：
----- - - ------------------ --------------------------------------------
示例
下面是一个使用示例：
----- -- - ------------------------
---------- -
------ -
--- ----------
--- --------
--- --------
--- ------------
--- ---------------
--
--------- ----------- --------- ----- -
----- -- - --------------------
---------------------- -----------------------
-
---
----- ------- - -
- ---
-- ---
--- ---
---- ---
----- ---
------ ---
--
----- ---- - -------------------
------------------该代码会输出下面的 HTML 代码：
--- -------------- ---------------------- --- -------------- ---------------------- --- -------------- ---------------------- --- -------------- ---------------------- --- -------------- ---------------------- --- -------------- ----------------------
如上所示，使用 markdown-it-named-headings 可以轻松生成具有 id 和 class 的标题，并且可以自定义生成的级别和对应的 class，同时还可以在生成完毕后增加回调函数处理操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/74135