Image

  • Markdown
  • Markdown
  • Image
About 2 min

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

Config

Image Lazyload

If you want to lazyload images in your pages, you can set imageLazyload: 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.imageMark: 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)

GitHub LightGitHub Dark

GitHub LightGitHub Dark

Advanced

You can pass an object to imageMark 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.imageSize: 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" />

Image Title

Sometimes, you may want to add a description with image, in this case, you should set plugins.mdEnhance.imageTitle: true.

Then, when you add a title to the image, the image will be displayed as <figure> and title will be displayed as <figcaption>.

![GitHub Logo](/assets/icon/github-light.png "Github Logo")

Will be rendered as:

GitHub Logo
Github Logo

Loading...