Image
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,
},
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
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 attribute.
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.
Case
The above demo will render the following result
(Try to toggle theme mode)
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.jpg "Image title" =200x)
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>.
[](https://theme-hope.vuejs.press/)
[](https://theme-hope.vuejs.press/)
![VuePress Hope Logo](/logo.svg "VuePress Hope Logo" =300x300)
Will be rendered as:
