npm 包 marked-with-custom-heading-ids 使用教程

前言

在前端开发中，我们经常需要生成文档等，而 markdown 已经成为了最为流行的格式之一。然而，markdown 的一个遗憾之处是其对于标题的自动编号和锚点生成是固定的，而无法定制化。这时，我们就需要使用一款 npm 包——marked-with-custom-heading-ids，来解决这个问题。

简介

marked-with-custom-heading-ids 是一个 marked 的插件，它可以为 markdown 中的标题生成定制化的 id 和锚点。

安装

使用 npm 进行安装：

npm install marked-with-custom-heading-ids

使用

在 markdown 文件中，使用如下语法：

# 这是一个一级标题 {#一个定制的id}

其中，花括号中间的内容就是我们所要定制的 id。

在 JavaScript 中，使用如下代码：

const marked = require('marked-with-custom-heading-ids');
const markdownContent = '# 这是一个一级标题 {#一个定制的id}';
const htmlContent = marked(markdownContent);

这时，我们就可以得到如下的 html 代码：

<h1 id="一个定制的id">这是一个一级标题</h1>

示例

# 标题一 {#title1}

## 标题二 {#title2}

### 标题三 {#title3}

#### 标题四 {#title4}

const marked = require('marked-with-custom-heading-ids');
const markdownContent = '# 标题一 {#title1}\n\n## 标题二 {#title2}\n\n### 标题三 {#title3}\n\n#### 标题四 {#title4}';
const htmlContent = marked(markdownContent);

console.log(htmlContent);

输出结果：

<h1 id="title1">标题一</h1>
<h2 id="title2">标题二</h2>
<h3 id="title3">标题三</h3>
<h4 id="title4">标题四</h4>

总结

本文介绍了如何使用 marked-with-custom-heading-ids 这个 npm 包来实现 markdown 标题的定制化 id 和锚点生成。这样，我们就可以更加灵活地生成文档和网页等，提高了工作效率。

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