Image
Improve image syntax in Markdown to support color scheme and size.
# Config
module.exports = {
plugins: [
[
"md-enhance",
{
// Enable image mark
imageMark: true,
// Enable image size
imageSize: true,
},
],
],
};
2
3
4
5
6
7
8
9
10
11
12
13
# 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 using imageMark
option.




2
3
4
5
Case
The above demo will render the following result
# 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[];
}
2
3
4
5
6
# Image Size
You can use =widthxheight
to specify the image size when setting imageSize: true
in plugin options.



2
3
4
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" />
2
3