Skip to main content

Image

About 2 minMarkdownMarkdownImage

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,
      },
    },
  }),
});








 
 
 
 
 
 
 
 




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 attributeopen in new window.

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/image/github-light.svg#gh-dark-mode-only)
![GitHub Dark](/assets/image/github-dark.svg#gh-light-mode-only)

![GitHub Light](/assets/image/github-light.svg#dark)
![GitHub Dark](/assets/image/github-dark.svg#light)
Case

The above demo will render the following result

(Try to toggle theme mode)

GitHub Light
GitHub Dark

GitHub Light
GitHub Dark

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 Logoopen in new window
VuePress Hope Logo
VuePress Hope Logo
VuePress Hope Logo
VuePress Hope Logoopen in new window
VuePress Hope Logo
VuePress Hope Logo
VuePress Hope Logo