Less than 1 minute

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


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)

The above demo will render the following result

GitHub LightGitHub Dark

GitHub LightGitHub Dark


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.mdEnhanceimageSize: 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" />