MarkDown 是一种常用的文本格式，广泛应用于写作、博客和其他 Web 网页上。其中经常会包含图片，而图片在 MarkDown 中通常是通过以下格式来引入：
---------------------------
然而，在某些情况下，我们可能希望直接在文本中插入图片，而无需手动设置图片大小或位置等属性。这就需要使用到 markdown-it-implicit-figures 这个 npm 包。
markdown-it-implicit-figures 包提供了一个 MarkDown 解析器，可以将文本中的隐式图片转换为实际的图片标签，并自动根据图片大小和位置等信息进行排版处理。下面是如何使用这个包的教程。
安装 markdown-it-implicit-figures
首先，需要在项目中安装 markdown-it 和 markdown-it-implicit-figures 两个包。可以通过 npm 命令来完成：
--- ------- ------ ----------- ----------------------------
引入和初始化解析器
在代码中引入 markdown-it 和 markdown-it-implicit-figures，然后使用下面的代码来初始化一个新的解析器：
----- -- - ------------------------- ----- --------------- - ---------------------------------------- ----------------------- - --------- ------ -- ---- ----------------- -- ----------- ----- -- ----------- --------- ------ -- ----- --- ----- ---
插入隐式图片
现在，可以在文本中插入隐式图片了。将以下代码块插入到你的 Markdown 文本中：
------------------------------
然后使用解析器解析该文本，并在页面上渲染出图片：
----- ------ - -------------------------------------------- ------------------------------------------- - -------
其中，#output 是页面中一个用于显示输出结果的 HTML 元素。
此外，我们还可以在图片下方添加标题。只需要在插入图片时，使用 | 符号来分隔图片描述和标题即可：
------------------------------------
如果设置了 figcaption: true，则会自动将标题包装在 <figcaption> 标签中，并将其放置在图片下方。
总结
使用 markdown-it-implicit-figures 包，可以轻松地将 MarkDown 中的隐式图片转换为实际的图片标签，并自动进行排版处理。这对于博客、文章等 Web 内容的制作非常有用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/47656