npm 包 `markdown-it-attrs` 使用教程

简介

markdown-it-attrs 是一个便于在 Markdown 中添加属性的插件。它基于 markdown-it，可以方便地在 Markdown 标记中添加类名、ID，甚至更复杂的属性。本文将详细介绍如何使用这个插件。

安装

首先需要确保已经安装了 markdown-it，若未安装可通过以下命令安装：

npm install markdown-it --save

然后再安装 markdown-it-attrs：

npm install markdown-it-attrs --save

示例代码

使用示例代码是学习的最好方式。下面是一个简单的例子：

const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');

md.use(attrs);

const result = md.render('# This is a title with id and class {.my-class #my-id}');
console.log(result);

输出结果为：

<h1 id="my-id" class="my-class">This is a title with id and class</h1>

可以看到，在标题中添加了 ID 和类名。

用法

添加类名和 ID

在标记中添加类名和 ID 非常简单。只需要在对应的标记后面加上 {.class #id} 即可。例如：

# This is a title with class and ID {.my-class #my-id}

添加其他属性

除了类名和 ID，还可以添加其他属性。例如：

[link text](url){title="Link title" target="_blank"}

上述代码中，title 和 target 是两个自定义的属性。

属性值含有空格或特殊字符

如果属性值本身包含有空格或特殊字符，则需要使用引号将其括起来。例如：

# This is a title with class and ID and attribute {data-attr="value with spaces" data-another-attr='value with "quotes"'}

启用/禁用插件

可以在创建 markdown-it 实例时启用或禁用插件。例如：

const md = require('markdown-it')({
  html: true, // 启用 HTML 标签
  linkify: true, // 自动将 URL 转换为链接
  typographer: true, // 启用智能标点符号转换
  breaks: true, // 支持断行符
}).use(require('markdown-it-attrs'));

结论

markdown-it-attrs 是一个十分实用的 Markdown 插件。它可以方便地添加类名、ID 和更多属性，让我们的文档更加灵活和可读性更高。希望这篇教程对你有所帮助。

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