@mdit/plugin-img-mark
Plugins to mark images by ID suffix for theme mode.
Usage
TS
import MarkdownIt from "markdown-it";
import { imgMark } from "@mdit/plugin-img-mark";
const mdIt = MarkdownIt().use(imgMark, {
// your options, optional
});
mdIt.render("");
JS
const MarkdownIt = require("markdown-it");
const { imgMark } = require("@mdit/plugin-img-mark");
const mdIt = MarkdownIt().use(imgMark, {
// your options, optional
});
mdIt.render("");
Syntax
GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode.
This plugin allows you to add ID suffix to images links, and automatically add data-mode="lightmode-only|darkmode-only" to <img> tag based on your settings.
Related Styles
The plugin will not generate styles, because it doesn't know what the style should be, so you need to add related styles yourself.
If you are generating the page and controlling darkmode by dom, you should use:
lightmode-selector {
img[data-mode="darkmode-only"] {
display: none !important;
}
}
darkmode-selector {
img[data-mode="lightmode-only"] {
display: none !important;
}
}
If the page theme mode is based on user preference, you should use:
@media (prefers-color-scheme: light) {
img[data-mode="darkmode-only"] {
display: none !important;
}
}
@media (prefers-color-scheme: dark) {
img[data-mode="lightmode-only"] {
display: none !important;
}
}
Options
interface MarkdownItImgMarkOptions {
/**
* lightmode only ids
*
* @default ["gh-light-mode-only", "light"]
*/
light?: string[];
/**
* darkmode only ids
*
* @default ["gh-dark-mode-only", "dark"]
*/
dark?: string[];
}
Demo
Demo
