Image
Mr.Hope ... 2022-6-4 Less than 1 minute
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,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
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.
1
2
3
4
5
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[];
}
1
2
3
4
5
6
2
3
4
5
6
# Image Size
You can use =widthxheight to specify the image size when setting imageSize: true in plugin options.
![Alt](/example.jpg "Image title" =200x)
1
2
3
4
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" />
1
2
3
2
3