图片注释

markdown-it-implicit-figures 是一个 markdown-it 插件，可以让 VitePress 在渲染图片时，自动把普通的 Markdown 图片包裹在 <figure> 标签里，并且支持 <figcaption> 来做图片描述。

markdown-it-implicit-figures

---

🔹 默认 Markdown 写法

![图片描述](./example.png)

在 VitePress 默认情况下 → 输出：

<p><img src="./example.png" alt="图片描述"></p>

---

🔹 使用 markdown-it-implicit-figures 后

同样的写法，会输出：

<figure>
  <img src="./example.png" alt="图片描述">
  <figcaption>图片描述</figcaption>
</figure>

这样就能自动生成 图注，不用自己写 <figure> + <figcaption>。

---

🔹 安装

在你的 VitePress 项目里：

pnpm add markdown-it-implicit-figures
# 或
npm install markdown-it-implicit-figures

---

🔹 配置 VitePress

在 .vitepress/config.ts 里添加：

import { defineConfig } from 'vitepress'
import implicitFigures from 'markdown-it-implicit-figures'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(implicitFigures, {
        dataType: false,      // <figure data-type="image">，可关闭
        figcaption: true,     // 启用 figcaption
        tabindex: false,      // <figure tabindex="1">，可关闭
        link: false           // 是否把图片自动包裹在 <a> 里
      })
    }
  }
})

---

🔹 效果示例

Markdown：

![这是说明的图片](./example.png)

渲染后：

<figure>
  <img src="./example.png" alt="这是说明的图片">
  <figcaption>这是说明的图片</figcaption>
</figure>