npm 包 markdown-it-named-headings 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要使用 markdown 语言来书写文档并显示在网页上。但是，有时候我们需要给某些标题添加 id 和 class，以方便后续的操作和渲染效果。markdown-it-named-headings 便是一个可以实现这种功能的 npm 包。

安装

使用 npm 安装 markdown-it-named-headings：

npm install markdown-it-named-headings --save

使用方法

在 Node.js 中引入该包：

const mdnh = require("markdown-it-named-headings");

然后在 markdown-it 中使用该插件：

const md = require("markdown-it")()
  .use(mdnh, {
    // 配置项
  });

配置项

markdown-it-named-headings 提供了一些配置项，以定制化生成的标题。

slugify

slugify 用于定义生成的 id，其默认值为：

function slugify(s) {
  return encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, "-"));
}

这段函数会把标题文本中的多余空格、大写字母都剔除掉，并且把空格转成短横线。

如果需要定制化 id 的生成方式，可以传入自定义的 slugify 函数：

const md = require("markdown-it")()
  .use(mdnh, {
    slugify: function(s) {
      return s + "-my-custom-id";
    }
  });

level

level 用于定义生成的标题级别，默认是从 h2 到 h6：

{
  h2: "section",
  h3: "subsection",
  h4: "subsubsection",
  h5: "subsubsubsection",
  h6: "subsubsubsubsection"
}

如果需要定制级别和对应的 class，可以传入自定义的 level 映射：

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

callback

callback 用于定义生成完毕后的回调函数。比如，可以用来增加一些特殊的操作，如跳转锚点等。默认回调函数为空函数。

const md = require("markdown-it")()
  .use(mdnh, {
    callback: function($, $heading, data) {
      // 在标题前面添加锚点
      const id = $heading.attr("id");
      $heading.prepend($(`<a href="#${id}">#</a>`));
    }
  });

注意

需要注意的是，使用该插件生成的标题以及自定义的 class 都会被 markdown-it 转化成 HTML 标签。如果你需要对其进行修改，需要使用 DOM 操作，比如使用 jQuery：

const $ = require("jquery");

$("h2.section").addClass("my-custom-class");

示例

下面是一个使用示例：

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

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

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

该代码会输出下面的 HTML 代码：

<h2 id="标题1">标题1<a href="#标题1">#</a></h2>
<h3 id="标题2">标题2<a href="#标题2">#</a></h3>
<h4 id="标题3">标题3<a href="#标题3">#</a></h4>
<h5 id="标题4">标题4<a href="#标题4">#</a></h5>
<h6 id="标题5">标题5<a href="#标题5">#</a></h6>
<h6 id="标题6">标题6<a href="#标题6">#</a></h6>

如上所示，使用 markdown-it-named-headings 可以轻松生成具有 id 和 class 的标题，并且可以自定义生成的级别和对应的 class，同时还可以在生成完毕后增加回调函数处理操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/74135