@mdit/plugin-figure

生成带有标题的图片插件。

使用

import { figure } from "@mdit/plugin-figure";
import MarkdownIt from "markdown-it";

const mdIt = new MarkdownIt().use(figure, {
  // 你的选项，可选的
});

mdIt.render("![image](https://example.com/image.png)");

语法

有时，你可能希望为图像添加描述，并将其单独展示在上下文中，所以我们提供了此插件

当你单独将图片至于一行 (也可同时嵌套链接)，图像将显示为 <figure> ，标题或图片替代文字将显示为 <figcaption>。

选项

moveAttrsboolean | (string | RegExp)[]

默认值false

将图片属性复制或移动到 <figure> 上。

true：复制除原生 img 属性（src、alt、srcset、width、height、loading 等）外的所有属性到 <figure>，图片保留这些属性。
(string | RegExp)[]：移动仅匹配的属性到 <figure>，图片失去这些属性。

原生 img 属性（src、alt、title、width、height 等）永远不会被移动或复制到 <figure> 上，且 title 始终作为 <figcaption> 内容显示。

当 <figure> 已有 class 或 style 属性时，图片的值会合并进去：class 会去重，style 声明会用 ; 连接（空声明会被丢弃）。合并重复的键时，属性名按不区分大小写比较。其他重复的属性会被忽略，保留 figure 原有的值。

// 复制所有非原生属性到 figure（img 保留）
moveAttrs: true;

// 将 class 和 data-* 属性移动到 figure（img 失去）
moveAttrs: ["class", /^data-/];

focusableboolean

默认值true

图片是否可聚焦。启用时会为图片添加 tabindex="0"，除非图片已带有 tabindex 属性，此时会保留原有值。

linkImageboolean

默认值true

是否将链接图片 ([![image](url)](link)) 转换为 figure。

示例

Logo

Markdown

示例

![Logo](/favicon.ico)

[![Logo](/favicon.ico)](https://commonmark.org/)

![Logo](/favicon.ico "Markdown")

[![Logo](/favicon.ico "Markdown")](https://commonmark.org/)

与上游参考实现的完整对比见对比报告。