Image

Improve image syntax in Markdown to support color scheme and size.

Config

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // Enable figure
        figure: true,
        // Enable image lazyload
        imgLazyload: true,
        // Enable image mark
        imgMark: true,
        // Enable image size
        imgSize: true,
      },
    },
  }),
});

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // Enable figure
        figure: true,
        // Enable image lazyload
        imgLazyload: true,
        // Enable image mark
        imgMark: true,
        // Enable image size
        imgSize: true,
      },
    },
  }),
};

Image Lazyload

If you want to lazyload images in your pages, you can set imgLazyload: true in plugin options.

Note

We are enabling lazyload using native HTML5 features, so your browser must support loading=lazy attribute.

Image Mark

GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode. We support both GitHub’s markup and the easy markup #light and #dark.

You can enable it by setting plugins.mdEnhance.imgMark: true in theme options.

![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
![GitHub Dark](/assets/icon/github-dark.png#gh-light-mode-only)

![GitHub Light](/assets/icon/github-light.png#dark)
![GitHub Dark](/assets/icon/github-dark.png#light)

Case

The above demo will render the following result

(Try to toggle theme mode)

Advanced

You can pass an object to imgMark to config ID marks, available options are:

interface ImageMarkOptions {
  /** lightmode only IDs */
  light?: string[];
  /** darkmode only IDs */
  dark?: string[];
}

Image Size

You can use =widthxheight to specify the image size when setting plugins.mdEnhance.imgSize: true in theme options.

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

![Alt](/example.jpg "Image title" =200x)
![Alt](/example.bmp =x300)

The above Markdown will be parsed as:

<img src="/example.png" width="200" height="300" />
<img src="/example.jpg" title="Image title" width="200" />
<img src="/example.bmp" height="300" />

Figure

Sometimes, you may want to add a description with image and place it between contents, in this case you should set figure: true in plugin options.

If the image is standalone in a line, wrapped or not wrapped by link, it will be displayed as <figure> and title (or alt) will be displayed as <figcaption>.

![VuePress Hope Logo](/favicon.ico)

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

![VuePress Hope Logo](/favicon.ico "VuePress Hope Logo")

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

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

Will be rendered as:

VuePress Hope Logo

VuePress Hope Logo

VuePress Hope Logo

VuePress Hope Logo

VuePress Hope Logo