vuepress-plugin-md-power 1.0.0-rc.101 → 1.0.0-rc.102

package/lib/client/components/CanIUse.vue

@@ -68,15 +68,11 @@ function parseData(data: string | MessageData): MessageData {
     :data-past="past"
     :data-future="future"
   >
-    <iframe
-      :src="source"
-      :style="{ height }"
-      :title="`Can I use ${feature}`"
-    />
+    <iframe :src="source" :style="{ height }" :title="`Can I use ${feature}`" />
   </div>
 </template>
 
-<style scoped>
+<style>
 .ciu_embed {
   margin: 16px -24px;
 }

package/lib/client/components/CodeEditor.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { HighlighterCore } from 'shiki/core'
 import editorData from '@internal/md-power/replEditorData'
-import { getHighlighterCore } from 'shiki/core'
+import { createHighlighterCore } from 'shiki/core'
 import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
-import type { HighlighterCore } from 'shiki/core'
 import { resolveCodeInfo } from '../composables/codeRepl.js'
 
 let highlighter: HighlighterCore | null = null
@@ -17,7 +17,7 @@ const textAreaEl = shallowRef<HTMLTextAreaElement>()
 const input = ref('')
 
 async function init() {
-  highlighter = await getHighlighterCore({
+  highlighter = await createHighlighterCore({
     themes: 'light' in theme && 'dark' in theme ? [theme.light, theme.dark] : [theme],
     langs: Object.keys(grammars).map(key => grammars[key]),
     loadWasm: () => import('shiki/wasm'),

package/lib/client/components/CodeRepl.vue

@@ -101,7 +101,7 @@ function runCode() {
   padding-top: 6px;
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .code-repl-title {
@@ -111,7 +111,7 @@ function runCode() {
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background, border;
 }
 
@@ -142,7 +142,7 @@ function runCode() {
   line-height: 48px;
   color: var(--vp-code-tab-active-text-color);
   white-space: nowrap;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .icon-run {
@@ -156,7 +156,7 @@ function runCode() {
   cursor: pointer;
   border: solid 1px var(--vp-c-text-3);
   border-radius: 100%;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, border;
 }
 
@@ -171,7 +171,7 @@ function runCode() {
   justify-content: space-between;
   padding: 4px 10px 4px 20px;
   border-top: solid 2px var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .output-head .title {
@@ -184,7 +184,7 @@ function runCode() {
 .output-head .output-version {
   font-size: 12px;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-head .icon-close {
@@ -193,7 +193,7 @@ function runCode() {
   margin-left: 20px;
   color: var(--vp-c-text-3);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-head .icon-close:hover {
@@ -227,7 +227,7 @@ function runCode() {
 .output-content .stderr pre,
 .output-content.rust .stderr pre.error {
   color: var(--vp-c-danger-1, #b8272c);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-content.rust .stderr pre {
@@ -237,6 +237,6 @@ function runCode() {
 .output-content .stderr + .stdout {
   margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 </style>

package/lib/client/components/CodeSandbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { CodeSandboxTokenMeta } from '../../shared/index.js'
+import { computed } from 'vue'
 
 const props = defineProps<CodeSandboxTokenMeta>()
 
@@ -11,19 +11,17 @@ const SANDBOX = 'allow-forms allow-modals allow-popups allow-presentation allow-
 
 const source = computed(() => {
   const params = new URLSearchParams()
-  if (props.filepath) {
+  if (props.filepath)
     params.set(props.type === 'embed' ? 'module' : 'file', encodeURIComponent(props.filepath))
-  }
 
   if (props.type === 'embed') {
     params.set('view', props.layout ? props.layout.replace(/,/g, '+') : 'Editor+Preview')
 
-    if (props.console) {
+    if (props.console)
       params.set('expanddevtools', '1')
-    }
-    if (props.navbar === false) {
+
+    if (props.navbar === false)
       params.set('hidenavigation', '1')
-    }
   }
   else {
     params.set('from-embed', '')

package/lib/client/components/FileTreeItem.vue

@@ -60,7 +60,7 @@ onUnmounted(() => {
   background-color: var(--vp-c-bg-safe);
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
-  transition: border var(--t-color), background-color var(--t-color);
+  transition: border var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .vp-file-tree .vp-file-tree-title {
@@ -69,7 +69,7 @@ onUnmounted(() => {
   font-weight: bold;
   color: var(--vp-c-text-1);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .vp-file-tree ul {
@@ -106,7 +106,7 @@ onUnmounted(() => {
 .file-tree-item .tree-node.folder > .name {
   color: var(--vp-c-text-1);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node.folder > .name:hover {
@@ -130,7 +130,7 @@ onUnmounted(() => {
   mask: var(--icon) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node .name.focus {
@@ -141,7 +141,7 @@ onUnmounted(() => {
   color: var(--vp-c-bg);
   background-color: var(--vp-c-brand-2);
   border-radius: 4px;
-  transition: color var(--t-color), background-color var(--t-color);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node .name.focus:hover {
@@ -153,7 +153,7 @@ onUnmounted(() => {
   margin-left: 20px;
   overflow: hidden;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node [class*="vpi-"] {
@@ -170,7 +170,7 @@ onUnmounted(() => {
   padding-left: 8px !important;
   margin: 0 0 0 6px !important;
   border-left: solid 1px var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .file-tree-item:not(.expanded) > ul {

package/lib/client/components/Loading.vue

@@ -30,7 +30,7 @@ defineProps<{
   font-size: 36px;
   color: currentcolor;
   background-color: inherit;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .md-power-loading.absolute {

package/lib/client/components/PDFViewer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { PDFTokenMeta } from '../../shared/index.js'
 import { onMounted, toRefs } from 'vue'
 import { usePDF } from '../composables/pdf.js'
 import { useSize } from '../composables/size.js'
-import type { PDFTokenMeta } from '../../shared/index.js'
 
 const props = defineProps<PDFTokenMeta>()
 

package/lib/client/components/Plot.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { PlotOptions } from '../../shared/index.js'
 import { onClickOutside, useMediaQuery } from '@vueuse/core'
 import { computed, ref, shallowRef } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
 import { pluginOptions } from '../options.js'
-import type { PlotOptions } from '../../shared/index.js'
 
 const props = defineProps<Omit<PlotOptions, 'tag'>>()
 
@@ -81,7 +81,7 @@ function onClick() {
   transition: color ease 0.25s, background-color ease 0.25s;
 }
 
-.dark .vp-plot {
+[data-theme="dark"] .vp-plot {
   background-color: var(--vp-c-bg-plot-dark, #fff);
 }
 
@@ -90,8 +90,8 @@ function onClick() {
   color: var(--vp-c-plot-light, #fff);
 }
 
-.dark .vp-plot.hover:hover,
-.dark .vp-plot.active {
+[data-theme="dark"] .vp-plot.hover:hover,
+[data-theme="dark"] .vp-plot.active {
   color: var(--vp-c-plot-dark, #000);
 }
 </style>

package/lib/client/components/Replit.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { ReplitTokenMeta } from '../../shared/index.js'
 import { computed, getCurrentInstance, ref } from 'vue'
 import Loading from './Loading.vue'
-import type { ReplitTokenMeta } from '../../shared/index.js'
 
 const props = defineProps<ReplitTokenMeta>()
 

package/lib/node/index.js

@@ -1,4 +1,4 @@
-// src/node/features/imageSize.ts
+// src/node/enhance/imageSize.ts
 import { Buffer } from "node:buffer";
 import http from "node:https";
 import { URL } from "node:url";
@@ -36,7 +36,7 @@ function resolveAttrs(info) {
   return { attrs, rawAttrs };
 }
 
-// src/node/features/imageSize.ts
+// src/node/enhance/imageSize.ts
 var REG_IMG = /!\[.*?\]\(.*?\)/g;
 var REG_IMG_TAG = /<img(.*?)>/g;
 var REG_IMG_TAG_SRC = /src(?:set)?=(['"])(.+?)\1/g;
@@ -209,200 +209,10 @@ async function resolveImageSize(app, url, remote = false) {
 // src/node/plugin.ts
 import { addViteOptimizeDepsInclude } from "@vuepress/helper";
 
-// src/node/features/caniuse.ts
+// src/node/container/fileTree/index.ts
 import container from "markdown-it-container";
-import { customAlphabet } from "nanoid";
-
-// src/node/utils/createRuleBlock.ts
-function createRuleBlock(md, {
-  type: type2,
-  name = type2,
-  syntaxPattern,
-  beforeName = "import_code",
-  ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
-  meta,
-  content
-}) {
-  const MIN_LENGTH = type2.length + 5;
-  const START_CODES = [64, 91, ...type2.split("").map((c) => c.charCodeAt(0))];
-  md.block.ruler.before(
-    beforeName,
-    name,
-    (state, startLine, endLine, silent) => {
-      const pos = state.bMarks[startLine] + state.tShift[startLine];
-      const max = state.eMarks[startLine];
-      if (pos + MIN_LENGTH > max)
-        return false;
-      for (let i = 0; i < START_CODES.length; i += 1) {
-        if (state.src.charCodeAt(pos + i) !== START_CODES[i])
-          return false;
-      }
-      const match = state.src.slice(pos, max).match(syntaxPattern);
-      if (!match)
-        return false;
-      if (silent)
-        return true;
-      const token = state.push(name, "", 0);
-      token.meta = meta(match);
-      token.map = [startLine, startLine + 1];
-      state.line = startLine + 1;
-      return true;
-    },
-    ruleOptions
-  );
-  md.renderer.rules[name] = (tokens, index) => {
-    const token = tokens[index];
-    token.content = content(token.meta);
-    return token.content;
-  };
-}
-
-// src/node/features/caniuse.ts
-var nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz", 5);
-var UNDERLINE_RE = /_+/g;
-var caniusePlugin = (md, { mode: defaultMode = "embed" } = {}) => {
-  createRuleBlock(md, {
-    type: "caniuse",
-    syntaxPattern: /^@\[caniuse\s*(embed|image)?(?:\{([0-9,\-]*)\})?\]\(([^)]*)\)/,
-    meta: ([, mode, versions = "", feature]) => ({
-      feature,
-      mode: mode || defaultMode,
-      versions
-    }),
-    content: (meta) => resolveCanIUse(meta)
-  });
-};
-function legacyCaniuse(md, { mode = "embed" } = {}) {
-  const modeMap = ["image", "embed"];
-  const isMode = (mode2) => modeMap.includes(mode2);
-  mode = isMode(mode) ? mode : modeMap[0];
-  const type2 = "caniuse";
-  const validateReg = new RegExp(`^${type2}`);
-  const validate = (info) => {
-    return validateReg.test(info.trim());
-  };
-  const render = (tokens, index) => {
-    const token = tokens[index];
-    if (token.nesting === 1) {
-      const info = token.info.trim().slice(type2.length).trim() || "";
-      const feature = info.split(/\s+/)[0];
-      const versions = info.match(/\{(.*)\}/)?.[1] || "";
-      return feature ? resolveCanIUse({ feature, mode, versions }) : "";
-    } else {
-      return "";
-    }
-  };
-  md.use(container, type2, { validate, render });
-}
-function resolveCanIUse({ feature, mode, versions }) {
-  if (!feature)
-    return "";
-  if (mode === "image") {
-    const link = "https://caniuse.bitsofco.de/image/";
-    const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com`;
-    return `<ClientOnly><p><picture>
-      <source type="image/webp" srcset="${link}${feature}.webp">
-      <source type="image/png" srcset="${link}${feature}.png">
-      <img src="${link}${feature}.jpg" alt="${alt}" width="100%">
-    </picture></p></ClientOnly>`;
-  }
-  feature = feature.replace(UNDERLINE_RE, "_");
-  const { past, future } = resolveVersions(versions);
-  const meta = nanoid();
-  return `<CanIUseViewer feature="${feature}" meta="${meta}" past="${past}" future="${future}" />`;
-}
-function resolveVersions(versions) {
-  if (!versions)
-    return { past: 2, future: 1 };
-  const list = versions.split(",").map((v) => Number(v.trim())).filter((v) => !Number.isNaN(v) && v >= -5 && v <= 3);
-  list.push(0);
-  const uniq = [...new Set(list)].sort((a, b) => b - a);
-  return {
-    future: uniq[0],
-    past: Math.abs(uniq[uniq.length - 1])
-  };
-}
-
-// src/node/utils/parseRect.ts
-function parseRect(str, unit = "px") {
-  if (Number.parseFloat(str) === Number(str))
-    return `${str}${unit}`;
-  return str;
-}
-
-// src/node/features/codepen.ts
-var CODEPEN_LINK = "https://codepen.io/";
-var codepenPlugin = (md) => {
-  createRuleBlock(md, {
-    type: "codepen",
-    syntaxPattern: /^@\[codepen([^\]]*)\]\(([^)]*)\)/,
-    meta: ([, info = "", source = ""]) => {
-      const { attrs } = resolveAttrs(info);
-      const [user, slash] = source.split("/");
-      return {
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "400px",
-        user,
-        slash,
-        title: attrs.title,
-        preview: attrs.preview,
-        editable: attrs.editable,
-        tab: attrs.tab ?? "result",
-        theme: attrs.theme
-      };
-    },
-    content: (meta) => {
-      const { title = "Codepen", height, width } = meta;
-      const params = new URLSearchParams();
-      if (meta.editable) {
-        params.set("editable", "true");
-      }
-      if (meta.tab) {
-        params.set("default-tab", meta.tab);
-      }
-      if (meta.theme) {
-        params.set("theme-id", meta.theme);
-      }
-      const middle = meta.preview ? "/embed/preview/" : "/embed/";
-      const link = `${CODEPEN_LINK}${meta.user}${middle}${meta.slash}?${params.toString()}`;
-      const style = `width:${width};height:${height};margin:16px auto;border-radius:5px;`;
-      return `<iframe class="code-pen-iframe-wrapper" src="${link}" title="${title}" style="${style}" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="${CODEPEN_LINK}${meta.user}/pen/${meta.slash}">${title}</a> by ${meta.user} (<a href="${CODEPEN_LINK}${meta.user}">@${meta.user}</a>) on <a href="${CODEPEN_LINK}">CodePen</a>.</iframe>`;
-    }
-  });
-};
-
-// src/node/features/codeSandbox.ts
-var codeSandboxPlugin = (md) => {
-  createRuleBlock(md, {
-    type: "codesandbox",
-    syntaxPattern: /^@\[codesandbox(?:\s+(embed|button))?([^\]]*)\]\(([^)]*)\)/,
-    meta([, type2, info = "", source = ""]) {
-      const { attrs } = resolveAttrs(info);
-      const [profile, filepath2 = ""] = source.split("#");
-      const [user, id] = profile.includes("/") ? profile.split("/") : ["", profile];
-      return {
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "500px",
-        user,
-        id,
-        title: attrs.title ?? "",
-        console: attrs.console ?? false,
-        navbar: attrs.navbar ?? true,
-        layout: attrs.layout ?? "",
-        type: type2 || "embed",
-        filepath: filepath2
-      };
-    },
-    content({ title, height, width, user, id, type: type2, filepath: filepath2, console, navbar, layout }) {
-      return `<CodeSandboxViewer title="${title}" height="${height}" width="${width}" user="${user}" id="${id}" type="${type2}" filepath="${filepath2}" :console=${console} :navbar=${navbar} layout="${layout}" />`;
-    }
-  });
-};
-
-// src/node/features/fileTree/index.ts
-import container2 from "markdown-it-container";
 
-// src/node/features/fileTree/definitions.ts
+// src/node/container/fileTree/definitions.ts
 var defaultFolder = "vscode-icons:default-folder";
 var defaultFile = "vscode-icons:default-file";
 var definitions = {
@@ -1177,7 +987,7 @@ var definitions = {
   }
 };
 
-// src/node/features/fileTree/findIcon.ts
+// src/node/container/fileTree/findIcon.ts
 function getFileIcon(fileName, type2 = "file") {
   const name = getFileIconName(fileName, type2);
   if (!name)
@@ -1222,7 +1032,7 @@ function getFileIconTypeFromExtension(fileName) {
   return void 0;
 }
 
-// src/node/features/fileTree/resolveTreeNodeInfo.ts
+// src/node/container/fileTree/resolveTreeNodeInfo.ts
 import Token from "markdown-it/lib/token.mjs";
 import { removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
 function resolveTreeNodeInfo(tokens, current, idx) {
@@ -1312,7 +1122,7 @@ function updateInlineToken(inline, info, icon) {
   inline.children = tokens;
 }
 
-// src/node/features/fileTree/index.ts
+// src/node/container/fileTree/index.ts
 var type = "file-tree";
 var closeType = `container_${type}_close`;
 var componentName = "FileTreeItem";
@@ -1355,106 +1165,26 @@ function fileTreePlugin(md) {
       return "</div>";
     }
   };
-  md.use(container2, type, { validate, render });
+  md.use(container, type, { validate, render });
 }
 
-// src/node/features/icons.ts
-var [openTag, endTag] = [":[", "]:"];
-function createTokenizer() {
-  return (state, silent) => {
-    let found = false;
-    const max = state.posMax;
-    const start = state.pos;
-    if (state.src.slice(start, start + 2) !== openTag)
-      return false;
-    if (silent)
-      return false;
-    if (max - start < 5)
-      return false;
-    state.pos = start + 2;
-    while (state.pos < max) {
-      if (state.src.slice(state.pos, state.pos + 2) === endTag) {
-        found = true;
-        break;
-      }
-      state.md.inline.skipToken(state);
-    }
-    if (!found || start + 2 === state.pos) {
-      state.pos = start;
-      return false;
-    }
-    const content = state.src.slice(start + 2, state.pos);
-    if (/^\s|\s$/.test(content)) {
-      state.pos = start;
-      return false;
-    }
-    state.posMax = state.pos;
-    state.pos = start + 2;
-    const [name, options = ""] = content.split(/\s+/);
-    const [size, color] = options.split("/");
-    const icon = state.push("vp_iconify_open", "VPIcon", 1);
-    icon.markup = openTag;
-    if (name)
-      icon.attrSet("name", name);
-    if (size)
-      icon.attrSet("size", size);
-    if (color)
-      icon.attrSet("color", color);
-    const close = state.push("vp_iconify_close", "VPIcon", -1);
-    close.markup = endTag;
-    state.pos = state.posMax + 2;
-    state.posMax = max;
-    return true;
+// src/node/container/langRepl.ts
+import container2 from "markdown-it-container";
+import { fs as fs2, getDirname, path as path2 } from "vuepress/utils";
+var RE_INFO = /^(#editable)?(.*)$/;
+function createReplContainer(md, lang) {
+  const type2 = `${lang}-repl`;
+  const validate = (info) => info.trim().startsWith(type2);
+  const render = (tokens, index) => {
+    const token = tokens[index];
+    const info = token.info.trim().slice(type2.length).trim() || "";
+    const [, editable, title] = info.match(RE_INFO) ?? [];
+    if (token.nesting === 1)
+      return `<CodeRepl ${editable ? "editable" : ""} title="${title || `${lang} playground`}">`;
+    else
+      return "</CodeRepl>";
   };
-}
-var iconsPlugin = (md) => {
-  md.inline.ruler.before("emphasis", "iconify", createTokenizer());
-};
-
-// src/node/features/jsfiddle.ts
-var jsfiddlePlugin = (md) => {
-  createRuleBlock(md, {
-    type: "jsfiddle",
-    syntaxPattern: /^@\[jsfiddle([^\]]*)\]\(([^)]*)\)/,
-    meta([, info = "", source]) {
-      const { attrs } = resolveAttrs(info);
-      const [user, id] = source.split("/");
-      return {
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "400px",
-        user,
-        id,
-        title: attrs.title || "JS Fiddle",
-        tab: attrs.tab?.replace(/\s+/g, "") || "js,css,html,result",
-        theme: attrs.theme || "dark"
-      };
-    },
-    content: ({ title = "JS Fiddle", height, width, user, id, tab, theme }) => {
-      theme = theme === "dark" ? "/dark/" : "";
-      const link = `https://jsfiddle.net/${user}/${id}/embedded/${tab}${theme}`;
-      const style = `width:${width};height:${height};margin:16px auto;border:none;border-radius:5px;`;
-      return `<iframe class="js-fiddle-iframe-wrapper" style="${style}" title="${title}" src="${link}" allowfullscreen="true" allowpaymentrequest="true"></iframe>`;
-    }
-  });
-};
-
-// src/node/features/langRepl.ts
-import container3 from "markdown-it-container";
-import { fs as fs2, getDirname, path as path2 } from "vuepress/utils";
-var RE_INFO = /^(#editable)?(.*)$/;
-function createReplContainer(md, lang) {
-  const type2 = `${lang}-repl`;
-  const validate = (info) => info.trim().startsWith(type2);
-  const render = (tokens, index) => {
-    const token = tokens[index];
-    const info = token.info.trim().slice(type2.length).trim() || "";
-    const [, editable, title] = info.match(RE_INFO) ?? [];
-    if (token.nesting === 1)
-      return `<CodeRepl ${editable ? "editable" : ""} title="${title || `${lang} playground`}">`;
-    else
-      return "</CodeRepl>";
-  };
-  md.use(container3, type2, { validate, render });
+  md.use(container2, type2, { validate, render });
 }
 async function langReplPlugin(app, md, {
   theme,
@@ -1505,82 +1235,235 @@ async function read(file) {
   return void 0;
 }
 
-// src/node/features/pdf.ts
-import { path as path3 } from "vuepress/utils";
-var pdfPlugin = (md) => {
-  createRuleBlock(md, {
-    type: "pdf",
-    // eslint-disable-next-line regexp/no-super-linear-backtracking
-    syntaxPattern: /^@\[pdf(?:\s+(\d+))?([^\]]*)\]\(([^)]*)\)/,
-    meta([, page, info = "", src = ""]) {
+// src/node/container/index.ts
+async function containerPlugin(app, md, options) {
+  if (options.repl)
+    await langReplPlugin(app, md, options.repl);
+  if (options.fileTree) {
+    fileTreePlugin(md);
+  }
+}
+
+// src/node/embed/caniuse.ts
+import container3 from "markdown-it-container";
+import { customAlphabet } from "nanoid";
+
+// src/node/embed/createEmbedRuleBlock.ts
+function createEmbedRuleBlock(md, {
+  type: type2,
+  name = type2,
+  syntaxPattern,
+  beforeName = "import_code",
+  ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
+  meta,
+  content
+}) {
+  const MIN_LENGTH = type2.length + 5;
+  const START_CODES = [64, 91, ...type2.split("").map((c) => c.charCodeAt(0))];
+  md.block.ruler.before(
+    beforeName,
+    name,
+    (state, startLine, endLine, silent) => {
+      const pos = state.bMarks[startLine] + state.tShift[startLine];
+      const max = state.eMarks[startLine];
+      if (pos + MIN_LENGTH > max)
+        return false;
+      for (let i = 0; i < START_CODES.length; i += 1) {
+        if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+          return false;
+      }
+      const match = state.src.slice(pos, max).match(syntaxPattern);
+      if (!match)
+        return false;
+      if (silent)
+        return true;
+      const token = state.push(name, "", 0);
+      token.meta = meta(match);
+      token.map = [startLine, startLine + 1];
+      state.line = startLine + 1;
+      return true;
+    },
+    ruleOptions
+  );
+  md.renderer.rules[name] = (tokens, index) => {
+    const token = tokens[index];
+    token.content = content(token.meta);
+    return token.content;
+  };
+}
+
+// src/node/embed/caniuse.ts
+var nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz", 5);
+var UNDERLINE_RE = /_+/g;
+var caniusePlugin = (md, { mode: defaultMode = "embed" } = {}) => {
+  createEmbedRuleBlock(md, {
+    type: "caniuse",
+    syntaxPattern: /^@\[caniuse\s*(embed|image)?(?:\{([0-9,\-]*)\})?\]\(([^)]*)\)/,
+    meta: ([, mode, versions = "", feature]) => ({
+      feature,
+      mode: mode || defaultMode,
+      versions
+    }),
+    content: (meta) => resolveCanIUse(meta)
+  });
+};
+function legacyCaniuse(md, { mode = "embed" } = {}) {
+  const modeMap = ["image", "embed"];
+  const isMode = (mode2) => modeMap.includes(mode2);
+  mode = isMode(mode) ? mode : modeMap[0];
+  const type2 = "caniuse";
+  const validateReg = new RegExp(`^${type2}`);
+  const validate = (info) => {
+    return validateReg.test(info.trim());
+  };
+  const render = (tokens, index) => {
+    const token = tokens[index];
+    if (token.nesting === 1) {
+      const info = token.info.trim().slice(type2.length).trim() || "";
+      const feature = info.split(/\s+/)[0];
+      const versions = info.match(/\{(.*)\}/)?.[1] || "";
+      return feature ? resolveCanIUse({ feature, mode, versions }) : "";
+    } else {
+      return "";
+    }
+  };
+  md.use(container3, type2, { validate, render });
+}
+function resolveCanIUse({ feature, mode, versions }) {
+  if (!feature)
+    return "";
+  if (mode === "image") {
+    const link = "https://caniuse.bitsofco.de/image/";
+    const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com`;
+    return `<ClientOnly><p><picture>
+      <source type="image/webp" srcset="${link}${feature}.webp">
+      <source type="image/png" srcset="${link}${feature}.png">
+      <img src="${link}${feature}.jpg" alt="${alt}" width="100%">
+    </picture></p></ClientOnly>`;
+  }
+  feature = feature.replace(UNDERLINE_RE, "_");
+  const { past, future } = resolveVersions(versions);
+  const meta = nanoid();
+  return `<CanIUseViewer feature="${feature}" meta="${meta}" past="${past}" future="${future}" />`;
+}
+function resolveVersions(versions) {
+  if (!versions)
+    return { past: 2, future: 1 };
+  const list = versions.split(",").map((v) => Number(v.trim())).filter((v) => !Number.isNaN(v) && v >= -5 && v <= 3);
+  list.push(0);
+  const uniq = [...new Set(list)].sort((a, b) => b - a);
+  return {
+    future: uniq[0],
+    past: Math.abs(uniq[uniq.length - 1])
+  };
+}
+
+// src/node/utils/parseRect.ts
+function parseRect(str, unit = "px") {
+  if (Number.parseFloat(str) === Number(str))
+    return `${str}${unit}`;
+  return str;
+}
+
+// src/node/embed/code/codepen.ts
+var CODEPEN_LINK = "https://codepen.io/";
+var codepenPlugin = (md) => {
+  createEmbedRuleBlock(md, {
+    type: "codepen",
+    syntaxPattern: /^@\[codepen([^\]]*)\]\(([^)]*)\)/,
+    meta: ([, info = "", source = ""]) => {
       const { attrs } = resolveAttrs(info);
+      const [user, slash] = source.split("/");
       return {
-        src,
-        page: +page || 1,
-        noToolbar: Boolean(attrs.noToolbar ?? false),
-        zoom: +attrs.zoom || 50,
         width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "",
-        ratio: attrs.ratio ? parseRect(attrs.ratio) : "",
-        title: path3.basename(src || "")
+        height: attrs.height ? parseRect(attrs.height) : "400px",
+        user,
+        slash,
+        title: attrs.title,
+        preview: attrs.preview,
+        editable: attrs.editable,
+        tab: attrs.tab ?? "result",
+        theme: attrs.theme
       };
     },
-    content({ title, src, page, noToolbar, width, height, ratio, zoom }) {
-      return `<PDFViewer src="${src}" title="${title}" :page="${page}" :no-toolbar="${noToolbar}" width="${width}" height="${height}" ratio="${ratio}" :zoom="${zoom}" />`;
+    content: (meta) => {
+      const { title = "Codepen", height, width } = meta;
+      const params = new URLSearchParams();
+      if (meta.editable) {
+        params.set("editable", "true");
+      }
+      if (meta.tab) {
+        params.set("default-tab", meta.tab);
+      }
+      if (meta.theme) {
+        params.set("theme-id", meta.theme);
+      }
+      const middle = meta.preview ? "/embed/preview/" : "/embed/";
+      const link = `${CODEPEN_LINK}${meta.user}${middle}${meta.slash}?${params.toString()}`;
+      const style = `width:${width};height:${height};margin:16px auto;border-radius:5px;`;
+      return `<iframe class="code-pen-iframe-wrapper" src="${link}" title="${title}" style="${style}" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="${CODEPEN_LINK}${meta.user}/pen/${meta.slash}">${title}</a> by ${meta.user} (<a href="${CODEPEN_LINK}${meta.user}">@${meta.user}</a>) on <a href="${CODEPEN_LINK}">CodePen</a>.</iframe>`;
     }
   });
 };
 
-// src/node/features/plot.ts
-var [openTag2, endTag2] = ["!!", "!!"];
-function createTokenizer2() {
-  return (state, silent) => {
-    let found = false;
-    const max = state.posMax;
-    const start = state.pos;
-    if (state.src.slice(start, start + 2) !== openTag2)
-      return false;
-    if (silent)
-      return false;
-    if (max - start < 5)
-      return false;
-    state.pos = start + 2;
-    while (state.pos < max) {
-      if (state.src.slice(state.pos - 1, state.pos + 1) === endTag2) {
-        found = true;
-        break;
-      }
-      state.md.inline.skipToken(state);
-    }
-    if (!found || start + 2 === state.pos) {
-      state.pos = start;
-      return false;
+// src/node/embed/code/codeSandbox.ts
+var codeSandboxPlugin = (md) => {
+  createEmbedRuleBlock(md, {
+    type: "codesandbox",
+    syntaxPattern: /^@\[codesandbox(?:\s+(embed|button))?([^\]]*)\]\(([^)]*)\)/,
+    meta([, type2, info = "", source = ""]) {
+      const { attrs } = resolveAttrs(info);
+      const [profile, filepath2 = ""] = source.split("#");
+      const [user, id] = profile.includes("/") ? profile.split("/") : ["", profile];
+      return {
+        width: attrs.width ? parseRect(attrs.width) : "100%",
+        height: attrs.height ? parseRect(attrs.height) : "500px",
+        user,
+        id,
+        title: attrs.title ?? "",
+        console: attrs.console ?? false,
+        navbar: attrs.navbar ?? true,
+        layout: attrs.layout ?? "",
+        type: type2 || "embed",
+        filepath: filepath2
+      };
+    },
+    content({ title, height, width, user, id, type: type2, filepath: filepath2, console, navbar, layout }) {
+      return `<CodeSandboxViewer title="${title}" height="${height}" width="${width}" user="${user}" id="${id}" type="${type2}" filepath="${filepath2}" :console=${console} :navbar=${navbar} layout="${layout}" />`;
     }
-    const content = state.src.slice(start + 2, state.pos - 1);
-    if (/^\s|\s$/.test(content)) {
-      state.pos = start;
-      return false;
+  });
+};
+
+// src/node/embed/code/jsfiddle.ts
+var jsfiddlePlugin = (md) => {
+  createEmbedRuleBlock(md, {
+    type: "jsfiddle",
+    syntaxPattern: /^@\[jsfiddle([^\]]*)\]\(([^)]*)\)/,
+    meta([, info = "", source]) {
+      const { attrs } = resolveAttrs(info);
+      const [user, id] = source.split("/");
+      return {
+        width: attrs.width ? parseRect(attrs.width) : "100%",
+        height: attrs.height ? parseRect(attrs.height) : "400px",
+        user,
+        id,
+        title: attrs.title || "JS Fiddle",
+        tab: attrs.tab?.replace(/\s+/g, "") || "js,css,html,result",
+        theme: attrs.theme || "dark"
+      };
+    },
+    content: ({ title = "JS Fiddle", height, width, user, id, tab, theme }) => {
+      theme = theme === "dark" ? "/dark/" : "";
+      const link = `https://jsfiddle.net/${user}/${id}/embedded/${tab}${theme}`;
+      const style = `width:${width};height:${height};margin:16px auto;border:none;border-radius:5px;`;
+      return `<iframe class="js-fiddle-iframe-wrapper" style="${style}" title="${title}" src="${link}" allowfullscreen="true" allowpaymentrequest="true"></iframe>`;
     }
-    state.posMax = state.pos - 1;
-    state.pos = start + 2;
-    const open = state.push("plot_open", "Plot", 1);
-    open.markup = openTag2;
-    const text = state.push("text", "", 0);
-    text.content = content;
-    const close = state.push("plot_close", "Plot", -1);
-    close.markup = endTag2;
-    state.pos = state.posMax + 2;
-    state.posMax = max;
-    return true;
-  };
-}
-var plotPlugin = (md) => {
-  md.inline.ruler.before("emphasis", "plot", createTokenizer2());
+  });
 };
 
-// src/node/features/replit.ts
+// src/node/embed/code/replit.ts
 var replitPlugin = (md) => {
-  createRuleBlock(md, {
+  createEmbedRuleBlock(md, {
     type: "replit",
     syntaxPattern: /^@\[replit([^\]]*)\]\(([^)]*)\)/,
     meta: ([, info = "", source = ""]) => {
@@ -1599,7 +1482,33 @@ var replitPlugin = (md) => {
   });
 };
 
-// src/node/features/video/bilibili.ts
+// src/node/embed/pdf.ts
+import { path as path3 } from "vuepress/utils";
+var pdfPlugin = (md) => {
+  createEmbedRuleBlock(md, {
+    type: "pdf",
+    // eslint-disable-next-line regexp/no-super-linear-backtracking
+    syntaxPattern: /^@\[pdf(?:\s+(\d+))?([^\]]*)\]\(([^)]*)\)/,
+    meta([, page, info = "", src = ""]) {
+      const { attrs } = resolveAttrs(info);
+      return {
+        src,
+        page: +page || 1,
+        noToolbar: Boolean(attrs.noToolbar ?? false),
+        zoom: +attrs.zoom || 50,
+        width: attrs.width ? parseRect(attrs.width) : "100%",
+        height: attrs.height ? parseRect(attrs.height) : "",
+        ratio: attrs.ratio ? parseRect(attrs.ratio) : "",
+        title: path3.basename(src || "")
+      };
+    },
+    content({ title, src, page, noToolbar, width, height, ratio, zoom }) {
+      return `<PDFViewer src="${src}" title="${title}" :page="${page}" :no-toolbar="${noToolbar}" width="${width}" height="${height}" ratio="${ratio}" :zoom="${zoom}" />`;
+    }
+  });
+};
+
+// src/node/embed/video/bilibili.ts
 import { URLSearchParams as URLSearchParams2 } from "node:url";
 
 // src/node/utils/timeToSeconds.ts
@@ -1612,10 +1521,10 @@ function timeToSeconds(time) {
   return s + m * 60 + h * 3600;
 }
 
-// src/node/features/video/bilibili.ts
+// src/node/embed/video/bilibili.ts
 var BILIBILI_LINK = "https://player.bilibili.com/player.html";
 var bilibiliPlugin = (md) => {
-  createRuleBlock(md, {
+  createEmbedRuleBlock(md, {
     type: "bilibili",
     name: "video_bilibili",
     // eslint-disable-next-line regexp/no-super-linear-backtracking
@@ -1662,11 +1571,11 @@ var bilibiliPlugin = (md) => {
   });
 };
 
-// src/node/features/video/youtube.ts
+// src/node/embed/video/youtube.ts
 import { URLSearchParams as URLSearchParams3 } from "node:url";
 var YOUTUBE_LINK = "https://www.youtube.com/embed/";
 var youtubePlugin = (md) => {
-  createRuleBlock(md, {
+  createEmbedRuleBlock(md, {
     type: "youtube",
     name: "video_youtube",
     syntaxPattern: /^@\[youtube([^\]]*)\]\(([^)]*)\)/,
@@ -1704,6 +1613,142 @@ var youtubePlugin = (md) => {
   });
 };
 
+// src/node/embed/index.ts
+function embedSyntaxPlugin(md, options) {
+  if (options.caniuse) {
+    const caniuse = options.caniuse === true ? {} : options.caniuse;
+    md.use(caniusePlugin, caniuse);
+    legacyCaniuse(md, caniuse);
+  }
+  if (options.pdf) {
+    md.use(pdfPlugin);
+  }
+  if (options.bilibili) {
+    md.use(bilibiliPlugin);
+  }
+  if (options.youtube) {
+    md.use(youtubePlugin);
+  }
+  if (options.codepen) {
+    md.use(codepenPlugin);
+  }
+  if (options.replit) {
+    md.use(replitPlugin);
+  }
+  if (options.codeSandbox) {
+    md.use(codeSandboxPlugin);
+  }
+  if (options.jsfiddle) {
+    md.use(jsfiddlePlugin);
+  }
+}
+
+// src/node/inline/icons.ts
+var [openTag, endTag] = [":[", "]:"];
+var iconsPlugin = (md) => md.inline.ruler.before("emphasis", "iconify", createTokenizer());
+function createTokenizer() {
+  return (state, silent) => {
+    let found = false;
+    const max = state.posMax;
+    const start = state.pos;
+    if (state.src.slice(start, start + 2) !== openTag)
+      return false;
+    if (silent)
+      return false;
+    if (max - start < 5)
+      return false;
+    state.pos = start + 2;
+    while (state.pos < max) {
+      if (state.src.slice(state.pos, state.pos + 2) === endTag) {
+        found = true;
+        break;
+      }
+      state.md.inline.skipToken(state);
+    }
+    if (!found || start + 2 === state.pos) {
+      state.pos = start;
+      return false;
+    }
+    const content = state.src.slice(start + 2, state.pos);
+    if (/^\s|\s$/.test(content)) {
+      state.pos = start;
+      return false;
+    }
+    state.posMax = state.pos;
+    state.pos = start + 2;
+    const [name, options = ""] = content.split(/\s+/);
+    const [size, color] = options.split("/");
+    const icon = state.push("vp_iconify_open", "VPIcon", 1);
+    icon.markup = openTag;
+    if (name)
+      icon.attrSet("name", name);
+    if (size)
+      icon.attrSet("size", size);
+    if (color)
+      icon.attrSet("color", color);
+    const close = state.push("vp_iconify_close", "VPIcon", -1);
+    close.markup = endTag;
+    state.pos = state.posMax + 2;
+    state.posMax = max;
+    return true;
+  };
+}
+
+// src/node/inline/plot.ts
+var [openTag2, endTag2] = ["!!", "!!"];
+var plotPlugin = (md) => md.inline.ruler.before("emphasis", "plot", createTokenizer2());
+function createTokenizer2() {
+  return (state, silent) => {
+    let found = false;
+    const max = state.posMax;
+    const start = state.pos;
+    if (state.src.slice(start, start + 2) !== openTag2)
+      return false;
+    if (silent)
+      return false;
+    if (max - start < 5)
+      return false;
+    state.pos = start + 2;
+    while (state.pos < max) {
+      if (state.src.slice(state.pos - 1, state.pos + 1) === endTag2) {
+        found = true;
+        break;
+      }
+      state.md.inline.skipToken(state);
+    }
+    if (!found || start + 2 === state.pos) {
+      state.pos = start;
+      return false;
+    }
+    const content = state.src.slice(start + 2, state.pos - 1);
+    if (/^\s|\s$/.test(content)) {
+      state.pos = start;
+      return false;
+    }
+    state.posMax = state.pos - 1;
+    state.pos = start + 2;
+    const open = state.push("plot_open", "Plot", 1);
+    open.markup = openTag2;
+    const text = state.push("text", "", 0);
+    text.content = content;
+    const close = state.push("plot_close", "Plot", -1);
+    close.markup = endTag2;
+    state.pos = state.posMax + 2;
+    state.posMax = max;
+    return true;
+  };
+}
+
+// src/node/inline/index.ts
+function inlineSyntaxPlugin(md, options) {
+  if (options.icons) {
+    md.use(iconsPlugin);
+  }
+  if (options.plot === true || typeof options.plot === "object" && options.plot.tag !== false) {
+    md.use(plotPlugin);
+  }
+}
+
 // src/node/prepareConfigFile.ts
 import { ensureEndingSlash } from "@vuepress/helper";
 import { getDirname as getDirname2, path as path4 } from "vuepress/utils";
@@ -1767,63 +1812,27 @@ ${Array.from(enhances.values()).map((item) => `    ${item}`).join("\n")}
 
 // src/node/plugin.ts
 function markdownPowerPlugin(options = {}) {
-  return (app) => {
-    return {
-      name: "vuepress-plugin-md-power",
-      clientConfigFile: (app2) => prepareConfigFile(app2, options),
-      define: {
-        __MD_POWER_INJECT_OPTIONS__: options
-      },
-      extendsBundlerOptions(bundlerOptions) {
-        if (options.repl) {
-          addViteOptimizeDepsInclude(
-            bundlerOptions,
-            app,
-            ["shiki/core", "shiki/wasm"]
-          );
-        }
-      },
-      extendsMarkdown: async (md, app2) => {
-        await imageSizePlugin(app2, md, options.imageSize);
-        if (options.caniuse) {
-          const caniuse = options.caniuse === true ? {} : options.caniuse;
-          md.use(caniusePlugin, caniuse);
-          legacyCaniuse(md, caniuse);
-        }
-        if (options.pdf) {
-          md.use(pdfPlugin);
-        }
-        if (options.icons) {
-          md.use(iconsPlugin);
-        }
-        if (options.bilibili) {
-          md.use(bilibiliPlugin);
-        }
-        if (options.youtube) {
-          md.use(youtubePlugin);
-        }
-        if (options.codepen) {
-          md.use(codepenPlugin);
-        }
-        if (options.replit) {
-          md.use(replitPlugin);
-        }
-        if (options.codeSandbox) {
-          md.use(codeSandboxPlugin);
-        }
-        if (options.jsfiddle) {
-          md.use(jsfiddlePlugin);
-        }
-        if (options.plot === true || typeof options.plot === "object" && options.plot.tag !== false) {
-          md.use(plotPlugin);
-        }
-        if (options.repl)
-          await langReplPlugin(app2, md, options.repl);
-        if (options.fileTree) {
-          fileTreePlugin(md);
-        }
+  return {
+    name: "vuepress-plugin-md-power",
+    clientConfigFile: (app) => prepareConfigFile(app, options),
+    define: {
+      __MD_POWER_INJECT_OPTIONS__: options
+    },
+    extendsBundlerOptions(bundlerOptions, app) {
+      if (options.repl) {
+        addViteOptimizeDepsInclude(
+          bundlerOptions,
+          app,
+          ["shiki/core", "shiki/wasm"]
+        );
       }
-    };
+    },
+    extendsMarkdown: async (md, app) => {
+      embedSyntaxPlugin(md, options);
+      inlineSyntaxPlugin(md, options);
+      await containerPlugin(app, md, options);
+      await imageSizePlugin(app, md, options.imageSize);
+    }
   };
 }
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.101",
+  "version": "1.0.0-rc.102",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -34,14 +34,14 @@
     "vuepress": "2.0.0-rc.15"
   },
   "dependencies": {
-    "@vuepress/helper": "2.0.0-rc.42",
+    "@vuepress/helper": "2.0.0-rc.46",
     "@vueuse/core": "^11.1.0",
     "image-size": "^1.1.1",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.7",
     "shiki": "^1.18.0",
-    "tm-grammars": "^1.17.23",
-    "tm-themes": "^1.8.2",
+    "tm-grammars": "^1.17.24",
+    "tm-themes": "^1.8.3",
     "vue": "^3.5.7"
   },
   "devDependencies": {