简介
remark-heading-id 是一个 npm 包，它可以为 markdown 中的标题自动生成唯一的 id，让页面更方便地跳转到特定的章节。
实际上，这个功能很容易实现。只需要在每个标题中添加一个类似于 id="chapter1" 的属性即可。但是手动添加这些属性非常麻烦。如果我们有数百个标题需要修改，那么就会非常痛苦。这时候 remark-heading-id 就派上用场了。
安装
使用 npm 安装 remark-heading-id 包：
npm install remark-heading-id
安装成功后，在代码中导入 remark-heading-id 包。
使用
使用 remark-heading-id 很简单。只需要在 markdown 文件中添加类似于以下这行代码：
# This is a heading
然后运行以下代码：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- --------------- - ----------------------------- ----- --------- - ------------------------------ ----- -------- - - - ---- -- - ------- -- ----- ------ - -------------------------------- -----------------------------
结果如下：
<h1 id="this-is-a-heading">This is a heading</h1>
可以看到，remark-heading-id 自动为标题添加了一个 id。这个 id 是根据标题内容生成的，所以不需要手动设置。如果标题内容有改动，id 也会跟着改动。
配置
remark-heading-id 提供了一些选项，可以让我们自定义生成的 id。
根据标题内容生成 id
默认情况下，remark-heading-id 会根据标题内容自动生成 id。这是一个非常好的默认选项，可以保证 id 的唯一性，并且不需要我们手动设置。如果你希望保持默认配置，可以不设置任何选项。
const processor = remark().use(remarkHeadingId);
自定义 id 前缀
如果您希望覆盖自动生成的 id，请设置 prefix 选项。
const processor = remark().use(remarkHeadingId, { prefix: 'chapter-' });这个选项将强制使用给定的前缀，然后把标题内容转换为小写。例如：
# This is a Heading
将采用以下 id：
<h1 id="chapter-this-is-a-heading">This is a Heading</h1>
替换标题内容
默认情况下，remark-heading-id 不会修改标题内容。但是有时候，我们需要将标题中的一些字符替换为其他字符。例如，将空格替换为短横线是一种常见的做法。
const processor = remark().use(remarkHeadingId, { replace: / /g, with: '-' });在这个例子中，我们将空格替换为短横线。这意味着如果我们使用以下标题：
# This is a Heading
生成的 id 将是：
<h1 id="This-is-a-Heading">This is a Heading</h1>
这是因为我们只替换了空格，而不是全局替换。在一般情况下，建议只使用全局替换，以确保生成的 id 始终正确。
示例代码
下面是一个示例代码，使用了 remark-heading-id 包来生成 markdown 文件的目录。它使用自定义前缀和全局替换空格的选项来创建 id。
-- -------------------- ---- ------- ----- -- - -------------- ----- ---- - ---------------- ----- ------ - ------------------ ----- --------------- - ----------------------------- ----- --------- - ----------------------------- - ------- ----------- -------- - --- ----- ---- --- ----- -------- - ----------------------------- -------- ----- ------ - -------------------------------- -------------------------------- ---------------- --------
这段代码将 markdown 文件 example.md 转换为 html 文件 example.html。您可以在浏览器中打开它，并希望在每个标题下方看到一个链接，可用于快速导航至该部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382257d