Skip to main content

@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("![image](https://example.com/image.png#light)");

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

GitHub LightGitHub Dark

GitHub LightGitHub Dark

(Try to toggle theme mode)
![GitHub Light](/github-light.png#gh-dark-mode-only)
![GitHub Dark](/github-dark.png#gh-light-mode-only)

![GitHub Light](/github-light.png#dark)
![GitHub Dark](/github-dark.png#light)