使用 markdown-it-implicit-figures 解析 MarkDown 中的隐式图片

MarkDown 是一种常用的文本格式，广泛应用于写作、博客和其他 Web 网页上。其中经常会包含图片，而图片在 MarkDown 中通常是通过以下格式来引入：

![图片描述](/path/to/image.jpg)

然而，在某些情况下，我们可能希望直接在文本中插入图片，而无需手动设置图片大小或位置等属性。这就需要使用到 markdown-it-implicit-figures 这个 npm 包。

markdown-it-implicit-figures 包提供了一个 MarkDown 解析器，可以将文本中的隐式图片转换为实际的图片标签，并自动根据图片大小和位置等信息进行排版处理。下面是如何使用这个包的教程。

安装 markdown-it-implicit-figures

首先，需要在项目中安装 markdown-it 和 markdown-it-implicit-figures 两个包。可以通过 npm 命令来完成：

npm install --save markdown-it markdown-it-implicit-figures

引入和初始化解析器

在代码中引入 markdown-it 和 markdown-it-implicit-figures，然后使用下面的代码来初始化一个新的解析器：

const md = require('markdown-it')();
const implicitFigures = require('markdown-it-implicit-figures');

md.use(implicitFigures, {
  dataType: false,  // 自动添加 data-type="image" 属性
  figcaption: true, // 支持在图片下方添加标题
  tabindex: false,  // 禁用默认的 Tab 键焦点行为
});

插入隐式图片

现在，可以在文本中插入隐式图片了。将以下代码块插入到你的 Markdown 文本中：

![这里是图片描述](/path/to/image.jpg)

然后使用解析器解析该文本，并在页面上渲染出图片：

const result = md.render(`![这里是图片描述](/path/to/image.jpg)`);
document.getElementById('output').innerHTML = result;

其中，#output 是页面中一个用于显示输出结果的 HTML 元素。

此外，我们还可以在图片下方添加标题。只需要在插入图片时，使用 | 符号来分隔图片描述和标题即可：

![这里是图片描述|这里是标题](/path/to/image.jpg)

如果设置了 figcaption: true，则会自动将标题包装在 <figcaption> 标签中，并将其放置在图片下方。

总结

使用 markdown-it-implicit-figures 包，可以轻松地将 MarkDown 中的隐式图片转换为实际的图片标签，并自动进行排版处理。这对于博客、文章等 Web 内容的制作非常有用。

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