-
Notifications
You must be signed in to change notification settings - Fork 0
/
img-mark.html
90 lines (87 loc) · 46.3 KB
/
img-mark.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="en-US" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.18" />
<meta name="theme" content="VuePress Theme Hope 2.0.0-rc.59" />
<style>
:root {
--vp-c-bg: #fff;
}
[data-theme="dark"] {
--vp-c-bg: #1b1b1f;
}
html,
body {
background: var(--vp-c-bg);
}
</style>
<script>
const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
const systemDarkMode =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
document.documentElement.setAttribute("data-theme", "dark");
}
</script>
<link rel="alternate" hreflang="zh-cn" href="https://mdit-plugins.github.io/zh/img-mark.html"><meta property="og:url" content="https://mdit-plugins.github.io/img-mark.html"><meta property="og:site_name" content="Markdown It Plugins"><meta property="og:title" content="@mdit/plugin-img-mark"><meta property="og:description" content="Plugins to mark images by ID suffix for theme mode. Usage Syntax GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode. This plugin a..."><meta property="og:type" content="article"><meta property="og:image" content="https://example.com/image.png#light"><meta property="og:locale" content="en-US"><meta property="og:locale:alternate" content="zh-CN"><meta property="og:updated_time" content="2024-05-13T10:35:46.000Z"><meta property="article:modified_time" content="2024-05-13T10:35:46.000Z"><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"@mdit/plugin-img-mark","image":["https://example.com/image.png#light","https://example.com/image.png#light","https://mdit-plugins.github.io/github-light.png#dark","https://mdit-plugins.github.io/github-dark.png#light"],"dateModified":"2024-05-13T10:35:46.000Z","author":[]}</script><title>@mdit/plugin-img-mark | Markdown It Plugins</title><meta name="description" content="Plugins to mark images by ID suffix for theme mode. Usage Syntax GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode. This plugin a...">
<link rel="preload" href="/assets/style-bstnlqwW.css" as="style"><link rel="stylesheet" href="/assets/style-bstnlqwW.css">
<link rel="modulepreload" href="/assets/app-BsH677dL.js"><link rel="modulepreload" href="/assets/img-mark.html-BcrxYXg7.js"><link rel="modulepreload" href="/assets/github-dark-BwGFQ1is.js"><link rel="modulepreload" href="/assets/plugin-vue_export-helper-DlAUqK2U.js">
<link rel="prefetch" href="/assets/index.html-vneJ7U4N.js" as="script"><link rel="prefetch" href="/assets/abbr.html-BMVYSJGK.js" as="script"><link rel="prefetch" href="/assets/alert.html-BtnpEG4n.js" as="script"><link rel="prefetch" href="/assets/align.html-CNoWVsXI.js" as="script"><link rel="prefetch" href="/assets/attrs.html-qfRfC9Lv.js" as="script"><link rel="prefetch" href="/assets/container.html-95wmeWLf.js" as="script"><link rel="prefetch" href="/assets/demo.html-_ihd2Fyw.js" as="script"><link rel="prefetch" href="/assets/dl.html-SH2eo6ND.js" as="script"><link rel="prefetch" href="/assets/figure.html-AZgtruxQ.js" as="script"><link rel="prefetch" href="/assets/footnote.html-CUvsp9NF.js" as="script"><link rel="prefetch" href="/assets/img-lazyload.html-DFAqW3hn.js" as="script"><link rel="prefetch" href="/assets/img-size.html-DMRXHA5W.js" as="script"><link rel="prefetch" href="/assets/include.html-Dz6YwdEc.js" as="script"><link rel="prefetch" href="/assets/ins.html-BNKiI9Wi.js" as="script"><link rel="prefetch" href="/assets/katex.html-Bf4P6V9t.js" as="script"><link rel="prefetch" href="/assets/mark.html-BON5mAJc.js" as="script"><link rel="prefetch" href="/assets/mathjax.html-CqRB8Q3r.js" as="script"><link rel="prefetch" href="/assets/plantuml.html-DVyHn0wU.js" as="script"><link rel="prefetch" href="/assets/ruby.html-RTXEw-wi.js" as="script"><link rel="prefetch" href="/assets/snippet.html-Bqb_qJ2b.js" as="script"><link rel="prefetch" href="/assets/spoiler.html-Clqm2iFK.js" as="script"><link rel="prefetch" href="/assets/stylize.html-CkdkwsD4.js" as="script"><link rel="prefetch" href="/assets/sub.html-BDMKTeJ0.js" as="script"><link rel="prefetch" href="/assets/sup.html-CdPlLgMB.js" as="script"><link rel="prefetch" href="/assets/tab.html-tFVtHgsv.js" as="script"><link rel="prefetch" href="/assets/tasklist.html-DtzCqbFL.js" as="script"><link rel="prefetch" href="/assets/tex.html-CWgUdJT_.js" as="script"><link rel="prefetch" href="/assets/uml.html-CzcOdOzO.js" as="script"><link rel="prefetch" href="/assets/index.html-DZAC4Hi0.js" as="script"><link rel="prefetch" href="/assets/abbr.html-Bcmi3__t.js" as="script"><link rel="prefetch" href="/assets/alert.html-D_Fg79li.js" as="script"><link rel="prefetch" href="/assets/align.html-DIGTntku.js" as="script"><link rel="prefetch" href="/assets/attrs.html-CYYG48hl.js" as="script"><link rel="prefetch" href="/assets/container.html-CxzPnc-f.js" as="script"><link rel="prefetch" href="/assets/demo.html-5SRN-2-q.js" as="script"><link rel="prefetch" href="/assets/dl.html-BkRfxBdi.js" as="script"><link rel="prefetch" href="/assets/figure.html-BePpC17G.js" as="script"><link rel="prefetch" href="/assets/footnote.html-DLJJEymx.js" as="script"><link rel="prefetch" href="/assets/img-lazyload.html-4LvTdYb9.js" as="script"><link rel="prefetch" href="/assets/img-mark.html-DnV6LqW6.js" as="script"><link rel="prefetch" href="/assets/img-size.html-C-pm7O6I.js" as="script"><link rel="prefetch" href="/assets/include.html-BBq7LfMO.js" as="script"><link rel="prefetch" href="/assets/ins.html-CXiyl5N4.js" as="script"><link rel="prefetch" href="/assets/katex.html-CxF2yF7C.js" as="script"><link rel="prefetch" href="/assets/mark.html-DKzoAY6a.js" as="script"><link rel="prefetch" href="/assets/mathjax.html-CHG89EiV.js" as="script"><link rel="prefetch" href="/assets/plantuml.html-BpvORJPD.js" as="script"><link rel="prefetch" href="/assets/ruby.html-DNoSQdNL.js" as="script"><link rel="prefetch" href="/assets/snippet.html-BjGgXNsc.js" as="script"><link rel="prefetch" href="/assets/spoiler.html-Bh_WL9if.js" as="script"><link rel="prefetch" href="/assets/stylize.html-D9ydTPOh.js" as="script"><link rel="prefetch" href="/assets/sub.html-Cj3a12fq.js" as="script"><link rel="prefetch" href="/assets/sup.html-DQS6bs__.js" as="script"><link rel="prefetch" href="/assets/tab.html-BEretlCG.js" as="script"><link rel="prefetch" href="/assets/tasklist.html-CAINAjBZ.js" as="script"><link rel="prefetch" href="/assets/tex.html-CocPIXif.js" as="script"><link rel="prefetch" href="/assets/uml.html-Dn3D3SLH.js" as="script"><link rel="prefetch" href="/assets/404.html-B9ejwAPl.js" as="script"><link rel="prefetch" href="/assets/giscus-BZxmVUME.js" as="script"><link rel="prefetch" href="/assets/photoswipe.esm-GXRgw7eJ.js" as="script"><link rel="prefetch" href="/assets/index-DCs6OeCW.js" as="script"><link rel="prefetch" href="/assets/setupDevtools-7MC2TMWH-CBj47yJe.js" as="script">
</head>
<body>
<div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="vp-skip-link sr-only">Skip to main content</a><!--]--><!--[--><div class="theme-container external-link-icon has-toc" vp-container><!--[--><header id="navbar" class="vp-navbar" vp-navbar><div class="vp-navbar-start"><button type="button" class="vp-toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!----><!--[--><a class="route-link vp-brand" href="/" aria-label="Take me home"><img class="vp-nav-logo" src="/logo.svg" alt><!----><span class="vp-site-name hide-in-pad">Markdown It Plugins</span></a><!--]--><!----></div><div class="vp-navbar-center"><!----><!--[--><!----><!--]--><!----></div><div class="vp-navbar-end"><!----><!--[--><div class="vp-nav-item"><div class="vp-dropdown-wrapper"><button type="button" class="vp-dropdown-title" aria-label="Select language"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon i18n-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="i18n icon" name="i18n" style="width:1rem;height:1rem;vertical-align:middle;"><path d="M379.392 460.8 494.08 575.488l-42.496 102.4L307.2 532.48 138.24 701.44l-71.68-72.704L234.496 460.8l-45.056-45.056c-27.136-27.136-51.2-66.56-66.56-108.544h112.64c7.68 14.336 16.896 27.136 26.112 35.84l45.568 46.08 45.056-45.056C382.976 312.32 409.6 247.808 409.6 204.8H0V102.4h256V0h102.4v102.4h256v102.4H512c0 70.144-37.888 161.28-87.04 210.944L378.88 460.8zM576 870.4 512 1024H409.6l256-614.4H768l256 614.4H921.6l-64-153.6H576zM618.496 768h196.608L716.8 532.48 618.496 768z"></path></svg><!--]--><span class="arrow"></span><ul class="vp-dropdown"><li class="vp-dropdown-item"><a class="route-link route-link-active auto-link" href="/img-mark.html" aria-label="English"><!---->English<!----></a></li><li class="vp-dropdown-item"><a class="route-link auto-link" href="/zh/img-mark.html" aria-label="简体中文"><!---->简体中文<!----></a></li></ul></button></div></div><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://github.com/mdit-plugins/mdit-plugins" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="github icon" name="github" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="vp-nav-item hide-in-mobile"><button type="button" class="vp-color-mode-switch" id="color-mode-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" name="auto" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" name="dark" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" name="light" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!--[--><div id="docsearch-container" style="display:none;"></div><div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--><!--]--><!----><button type="button" class="vp-toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span><span class="vp-top"></span><span class="vp-middle"></span><span class="vp-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow start"></span></div><aside id="sidebar" class="vp-sidebar" vp-sidebar><!----><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/" aria-label="MarkdownIt plugins"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-home" style=""></span><!--]-->MarkdownIt plugins<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/abbr.html" aria-label="@mdit/plugin-abbr"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-book" style=""></span><!--]-->@mdit/plugin-abbr<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/alert.html" aria-label="@mdit/plugin-alert"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-bell" style=""></span><!--]-->@mdit/plugin-alert<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/align.html" aria-label="@mdit/plugin-align"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-align-center" style=""></span><!--]-->@mdit/plugin-align<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/attrs.html" aria-label="@mdit/plugin-attrs"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-code" style=""></span><!--]-->@mdit/plugin-attrs<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/container.html" aria-label="@mdit/plugin-container"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-box-open" style=""></span><!--]-->@mdit/plugin-container<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/demo.html" aria-label="@mdit/plugin-demo"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-lightbulb" style=""></span><!--]-->@mdit/plugin-demo<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/dl.html" aria-label="@mdit/plugin-dl"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-list-check" style=""></span><!--]-->@mdit/plugin-dl<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/figure.html" aria-label="@mdit/plugin-figure"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-image" style=""></span><!--]-->@mdit/plugin-figure<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/footnote.html" aria-label="@mdit/plugin-footnote"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-quote-left" style=""></span><!--]-->@mdit/plugin-footnote<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/img-lazyload.html" aria-label="@mdit/plugin-img-lazyload"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-spinner" style=""></span><!--]-->@mdit/plugin-img-lazyload<!----></a></li><li><a class="route-link route-link-active auto-link vp-sidebar-link active" href="/img-mark.html" aria-label="@mdit/plugin-img-mark"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-circle-half-stroke" style=""></span><!--]-->@mdit/plugin-img-mark<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/img-size.html" aria-label="@mdit/plugin-img-size"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-up-right-and-down-left-from-center" style=""></span><!--]-->@mdit/plugin-img-size<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/include.html" aria-label="@mdit/plugin-include"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-at" style=""></span><!--]-->@mdit/plugin-include<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/ins.html" aria-label="@mdit/plugin-ins"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-square-plus" style=""></span><!--]-->@mdit/plugin-ins<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/katex.html" aria-label="@mdit/plugin-katex"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-square-root-variable" style=""></span><!--]-->@mdit/plugin-katex<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/mark.html" aria-label="@mdit/plugin-mark"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-highlighter" style=""></span><!--]-->@mdit/plugin-mark<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/mathjax.html" aria-label="@mdit/plugin-mathjax"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-square-root-variable" style=""></span><!--]-->@mdit/plugin-mathjax<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/plantuml.html" aria-label="@mdit/plugin-plantuml"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-diagram-project" style=""></span><!--]-->@mdit/plugin-plantuml<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/ruby.html" aria-label="@mdit/plugin-ruby"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-paperclip" style=""></span><!--]-->@mdit/plugin-ruby<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/snippet.html" aria-label="@mdit/plugin-snippet"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-file-lines" style=""></span><!--]-->@mdit/plugin-snippet<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/spoiler.html" aria-label="@mdit/plugin-spoiler"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-eraser" style=""></span><!--]-->@mdit/plugin-spoiler<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/stylize.html" aria-label="@mdit/plugin-stylize"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-wand-magic-sparkles" style=""></span><!--]-->@mdit/plugin-stylize<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/sub.html" aria-label="@mdit/plugin-sub"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-subscript" style=""></span><!--]-->@mdit/plugin-sub<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/sup.html" aria-label="@mdit/plugin-sup"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-superscript" style=""></span><!--]-->@mdit/plugin-sup<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/tab.html" aria-label="@mdit/plugin-tab"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-table-columns" style=""></span><!--]-->@mdit/plugin-tab<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/tasklist.html" aria-label="@mdit/plugin-tasklist"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-square-check" style=""></span><!--]-->@mdit/plugin-tasklist<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/tex.html" aria-label="@mdit/plugin-tex"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-square-root-variable" style=""></span><!--]-->@mdit/plugin-tex<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/uml.html" aria-label="@mdit/plugin-uml"><!--[--><span class="font-icon icon fa-fw fa-sm fas fa-file-lines" style=""></span><!--]-->@mdit/plugin-uml<!----></a></li></ul><!----></aside><!--[--><main id="main-content" class="vp-page"><!--[--><!----><!----><nav class="vp-breadcrumb disable"></nav><div class="vp-page-title"><h1><span class="font-icon icon fa-fw fa-sm fas fa-circle-half-stroke" style=""></span>@mdit/plugin-img-mark</h1><!----><hr></div><div class="vp-toc-placeholder"><aside id="toc" vp-toc><!----><div class="vp-toc-header">On This Page<button type="button" class="print-button" title="Print"><svg xmlns="http://www.w3.org/2000/svg" class="icon print-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="print icon" name="print"><path d="M819.2 364.8h-44.8V128c0-17.067-14.933-32-32-32H281.6c-17.067 0-32 14.933-32 32v236.8h-44.8C145.067 364.8 96 413.867 96 473.6v192c0 59.733 49.067 108.8 108.8 108.8h44.8V896c0 17.067 14.933 32 32 32h460.8c17.067 0 32-14.933 32-32V774.4h44.8c59.733 0 108.8-49.067 108.8-108.8v-192c0-59.733-49.067-108.8-108.8-108.8zM313.6 160h396.8v204.8H313.6V160zm396.8 704H313.6V620.8h396.8V864zM864 665.6c0 25.6-19.2 44.8-44.8 44.8h-44.8V588.8c0-17.067-14.933-32-32-32H281.6c-17.067 0-32 14.933-32 32v121.6h-44.8c-25.6 0-44.8-19.2-44.8-44.8v-192c0-25.6 19.2-44.8 44.8-44.8h614.4c25.6 0 44.8 19.2 44.8 44.8v192z"></path></svg></button><div class="arrow end"></div></div><div class="vp-toc-wrapper"><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#usage">Usage</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#syntax">Syntax</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#options">Options</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#demo">Demo</a></li><!----><!--]--></ul><div class="vp-toc-marker" style="top:-1.7rem;"></div></div><!----></aside></div><!----><div class="theme-hope-content" vp-content><p>Plugins to mark images by ID suffix for theme mode.</p><!-- more --><h2 id="usage" tabindex="-1"><a class="header-anchor" href="#usage"><span>Usage</span></a></h2><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><button type="button" class="vp-code-tab-nav active" role="tab" aria-controls="codetab-7-0" aria-selected="true">TS</button><button type="button" class="vp-code-tab-nav" role="tab" aria-controls="codetab-7-1" aria-selected="false">JS</button></div><!--[--><div class="vp-code-tab active" id="codetab-7-0" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title">TS</div><!--[--><div class="language-ts" data-highlighter="shiki" data-ext="ts" data-title="ts" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> MarkdownIt</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> "markdown-it"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">imgMark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> "@mdit/plugin-img-mark"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> mdIt</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> MarkdownIt</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">().</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">use</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;">imgMark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // your options, optional</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E5C07B;">mdIt</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">render</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">""</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">);</span></span></code></pre></div><!--]--></div><div class="vp-code-tab" id="codetab-7-1" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title">JS</div><!--[--><div class="language-js" data-highlighter="shiki" data-ext="js" data-title="js" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> MarkdownIt</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> require</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"markdown-it"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;">imgMark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> require</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"@mdit/plugin-img-mark"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> mdIt</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> MarkdownIt</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">().</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">use</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;">imgMark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // your options, optional</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E5C07B;">mdIt</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">render</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">""</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">);</span></span></code></pre></div><!--]--></div><!--]--></div><h2 id="syntax" tabindex="-1"><a class="header-anchor" href="#syntax"><span>Syntax</span></a></h2><p>GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode.</p><p>This plugin allows you to add ID suffix to images links, and automatically add <code>data-mode="lightmode-only|darkmode-only"</code> to <code><img></code> tag based on your settings.</p><div class="hint-container tip"><p class="hint-container-title">Related Styles</p><p>The plugin will not generate styles, because it doesn't know what the style should be, so you need to add related styles yourself.</p><p>If you are generating the page and controlling darkmode by dom, you should use:</p><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" data-title="css" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">lightmode-selector</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> img[data-mode="darkmode-only"] {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> display: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">none</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> !important</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">darkmode-selector</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> img[data-mode="lightmode-only"] {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> display: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">none</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> !important</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If the page theme mode is based on user preference, you should use:</p><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" data-title="css" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">@media</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> (prefers-color-scheme: light) {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> img</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">[</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">data-mode</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"darkmode-only"</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">]</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> display: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">none</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> !important</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">@media</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> (prefers-color-scheme: dark) {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> img</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">[</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">data-mode</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"lightmode-only"</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">]</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> display: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">none</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> !important</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><h2 id="options" tabindex="-1"><a class="header-anchor" href="#options"><span>Options</span></a></h2><div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" data-title="ts" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> MarkdownItImgMarkOptions</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> * lightmode only ids</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> *</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> * </span><span style="--shiki-light:#383A42;--shiki-light-font-style:italic;--shiki-dark:#C678DD;--shiki-dark-font-style:italic;">@</span><span style="--shiki-light:#A626A4;--shiki-light-font-style:italic;--shiki-dark:#C678DD;--shiki-dark-font-style:italic;">default</span><span style="--shiki-light:#E45649;--shiki-light-font-style:italic;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> ["light"]</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> */</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> light</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">[];</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> * darkmode only ids</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> *</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> * </span><span style="--shiki-light:#383A42;--shiki-light-font-style:italic;--shiki-dark:#C678DD;--shiki-dark-font-style:italic;">@</span><span style="--shiki-light:#A626A4;--shiki-light-font-style:italic;--shiki-dark:#C678DD;--shiki-dark-font-style:italic;">default</span><span style="--shiki-light:#E45649;--shiki-light-font-style:italic;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> ["dark"]</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> */</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> dark</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">[];</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="demo" tabindex="-1"><a class="header-anchor" href="#demo"><span>Demo</span></a></h2><div class="vp-container vp-md-demo" id="md-demo-44"><div class="vp-container-header"><button type="button" title="toggle" aria-hidden="true" class="vp-md-demo-toggle-button end"></button><div class="vp-container-title">Demo</div></div><div class="vp-md-demo-display"><p><img src="/github-light.png" alt="GitHub Light" data-mode="darkmode-only" loading="lazy"><img src="/github-dark.png" alt="GitHub Dark" data-mode="lightmode-only" loading="lazy"></p></div><div class="vp-md-demo-code-wrapper" style="height:0;"><div class="vp-md-demo-codes"><div class="language-md" data-highlighter="shiki" data-ext="md" data-title="md" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">![</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">GitHub Light</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">]</span><span style="--shiki-light:#A626A4;--shiki-dark:#E06C75;">(</span><span style="--shiki-light:#A626A4;--shiki-light-text-decoration:inherit;--shiki-dark:#C678DD;--shiki-dark-text-decoration:underline;">/github-light.png#dark</span><span style="--shiki-light:#A626A4;--shiki-dark:#E06C75;">)</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">![</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">GitHub Dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">]</span><span style="--shiki-light:#A626A4;--shiki-dark:#E06C75;">(</span><span style="--shiki-light:#A626A4;--shiki-light-text-decoration:inherit;--shiki-dark:#C678DD;--shiki-dark-text-decoration:underline;">/github-dark.png#light</span><span style="--shiki-light:#A626A4;--shiki-dark:#E06C75;">)</span></span></code></pre></div></div></div></div><button type="button" class="vp-color-mode-switch" id="color-mode-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" name="auto" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" name="dark" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" name="light" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button> (Try to toggle theme mode)</div><!----><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link vp-meta-label" href="https://github.com/mdit-plugins/mdit-plugins/edit/main/docs/src/img-mark.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon edit-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="edit icon" name="edit"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><div class="update-time"><span class="vp-meta-label">Last update: </span><span class="vp-meta-info" data-allow-mismatch="text">5/13/2024, 10:35:46 AM</span></div><!----></div></footer><nav class="vp-page-nav"><a class="route-link auto-link prev" href="/img-lazyload.html" aria-label="@mdit/plugin-img-lazyload"><div class="hint"><span class="arrow start"></span>Prev</div><div class="link"><span class="font-icon icon fa-fw fa-sm fas fa-spinner" style=""></span>@mdit/plugin-img-lazyload</div></a><a class="route-link auto-link next" href="/img-size.html" aria-label="@mdit/plugin-img-size"><div class="hint">Next<span class="arrow end"></span></div><div class="link">@mdit/plugin-img-size<span class="font-icon icon fa-fw fa-sm fas fa-up-right-and-down-left-from-center" style=""></span></div></a></nav><div id="comment" class="giscus-wrapper input-top vp-comment" vp-comment style="display:block;"><div class="loading-icon-wrapper" style="display:flex;align-items:center;justify-content:center;height:96px"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" preserveAspectRatio="xMidYMid" viewBox="25 25 50 50"><animateTransform attributeName="transform" type="rotate" dur="2s" keyTimes="0;1" repeatCount="indefinite" values="0;360"></animateTransform><circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"><animate attributeName="stroke-dasharray" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1,200;90,200;1,200"></animate><animate attributeName="stroke-dashoffset" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" values="0;-35px;-125px"></animate></circle></svg></div></div><!----><!--]--></main><!--]--><footer class="vp-footer-wrapper" vp-footer><div class="vp-footer">Docs by <a href="https://theme-hope.vuejs.press/" target="_blank">VuePress Theme Hope</a></div><div class="vp-copyright">MIT LICENSE | Copyright © 2022-present Mr.Hope</div></footer></div><!--]--><!--]--><!--[--><!----><!--[--><!--]--><!--]--><!--]--></div>
<script type="module" src="/assets/app-BsH677dL.js" defer></script>
</body>
</html>