VuePress Markdown 图像增强语法配置

改进 Markdown 中的图像语法以支持颜色方案和大小。

配置

// .vuepress/config.ts
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用 figure
      figure: true,
      // 启用图片懒加载
      imgLazyload: true,
      // 启用图片标记
      imgMark: true,
      // 启用图片大小
      imgSize: true,
    }),
  ],
};

// .vuepress/config.js
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用 figure
      figure: true,
      // 启用图片懒加载
      imgLazyload: true,
      // 启用图片标记
      imgMark: true,
      // 启用图片大小
      imgSize: true,
    }),
  ],
};

图片懒加载

如果你想在你的页面中延迟加载图片，你可以在插件选项中设置 imgLazyload: true。

note

我们正在使用原生 HTML5 功能启用延迟加载，因此你的浏览器必须支持 loading=lazy 属性。

高级用法

你可以将对象传递给 imgMark 以配置 ID 标记，可用选项有:

interface ImageMarkOptions {
  /** 仅限日间模式的 ID */
  light?: string[];
  /** 仅限夜间模式的 ID */
  dark?: string[];
}

图片尺寸

当你在插件选项中设置 imgSize: true 时，可以使用 =widthxheight 指定图像大小。

![Alt](/example.png =200x300)

![Alt](/example.jpg "图片标题" =200x)
![Alt](/example.bmp =x300)

上面的 Markdown 将被解析为:

<img src="/example.png" width="200" height="300" />
<img src="/example.jpg" title="图片标题" width="200" />
<img src="/example.bmp" height="300" />

图片 Figure

有时，你可能希望为图像添加描述，并将其单独展示在上下文中，在这种情况下，你应该在插件选项中设置 figure: true。

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

![VuePress Hope 图标](/favicon.ico)

[![VuePress Hope 图标](/favicon.ico)](https://theme-hope.vuejs.press/)

![VuePress Hope 图标](/favicon.ico 'VuePress Hope 图标')

[![VuePress Hope 图标](/favicon.ico 'VuePress Hope 图标')](https://theme-hope.vuejs.press/)

![VuePress Hope 图标](/logo.svg "VuePress Hope 图标" =300x300)

将呈现为：

VuePress Hope 图标