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

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";
@@ -12,31 +12,31 @@ function resolveAttrs(info) {
   info = info.trim();
   if (!info)
     return { rawAttrs: "", attrs: {} };
-  const attrs = {};
+  const attrs2 = {};
   const rawAttrs = info;
   let matched;
   while (matched = info.match(RE_ATTR_VALUE)) {
     const { attr, value } = matched.groups || {};
-    attrs[attr] = value ?? true;
+    attrs2[attr] = value ?? true;
     info = info.slice(matched[0].length);
   }
-  Object.keys(attrs).forEach((key) => {
-    let value = attrs[key];
+  Object.keys(attrs2).forEach((key) => {
+    let value = attrs2[key];
     value = typeof value === "string" ? value.trim() : value;
     if (value === "true")
       value = true;
     else if (value === "false")
       value = false;
-    attrs[key] = value;
+    attrs2[key] = value;
     if (key.includes("-")) {
       const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
-      attrs[_key] = value;
+      attrs2[_key] = value;
     }
   });
-  return { attrs, rawAttrs };
+  return { attrs: attrs2, 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;
@@ -80,14 +80,14 @@ async function imageSizePlugin(app, md, type2 = false) {
     return (tokens, idx, options, env, self) => {
       const token = tokens[idx];
       token.content = token.content.replace(REG_IMG_TAG, (raw, info) => {
-        const { attrs } = resolveAttrs(info);
-        const src = attrs.src || attrs.srcset;
-        const size = resolveSize(src, attrs.width, attrs.height, env);
+        const { attrs: attrs2 } = resolveAttrs(info);
+        const src = attrs2.src || attrs2.srcset;
+        const size = resolveSize(src, attrs2.width, attrs2.height, env);
         if (!size)
           return raw;
-        attrs.width = size.width;
-        attrs.height = size.height;
-        const imgAttrs = Object.entries(attrs).map(([key, value]) => typeof value === "boolean" ? key : `${key}="${value}"`).join(" ");
+        attrs2.width = size.width;
+        attrs2.height = size.height;
+        const imgAttrs = Object.entries(attrs2).map(([key, value]) => typeof value === "boolean" ? key : `${key}="${value}"`).join(" ");
         return `<img ${imgAttrs}>`;
       });
       return rawHtmlRule(tokens, idx, options, env, self);
@@ -209,307 +209,176 @@ async function resolveImageSize(app, url, remote = false) {
 // src/node/plugin.ts
 import { addViteOptimizeDepsInclude } from "@vuepress/helper";
 
-// src/node/features/caniuse.ts
-import container from "markdown-it-container";
-import { customAlphabet } from "nanoid";
+// src/node/container/index.ts
+import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
 
-// 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;
+// src/node/container/align.ts
+import container from "markdown-it-container";
+var alignList = ["left", "center", "right", "justify"];
+function alignPlugin(md) {
+  for (const name of alignList) {
+    md.use(container, name, {
+      validate: (info) => info.trim() === name,
+      render: (tokens, idx) => {
+        if (tokens[idx].nesting === 1) {
+          return `<div style="text-align:${name}">`;
+        } else {
+          return "</div>";
+        }
       }
-      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/container/codeTabs.ts
+import { tab } from "@mdit/plugin-tab";
+import { isPlainObject } from "@vuepress/helper";
 
-// src/node/features/fileTree/definitions.ts
+// src/node/fileIcons/definitions.ts
 var defaultFolder = "vscode-icons:default-folder";
 var defaultFile = "vscode-icons:default-file";
 var definitions = {
   named: {
     // package manager
-    pnpm: "vscode-icons:file-type-light-pnpm",
-    PNPM: "vscode-icons:file-type-light-pnpm",
-    npm: "vscode-icons:file-type-npm",
-    NPM: "vscode-icons:file-type-npm",
-    yarn: "vscode-icons:file-type-yarn",
-    Yarn: "vscode-icons:file-type-yarn",
-    bun: "vscode-icons:file-type-bun",
-    Bun: "vscode-icons:file-type-bun",
-    deno: "vscode-icons:file-type-light-deno",
-    Deno: "vscode-icons:file-type-light-deno",
+    "pnpm": "vscode-icons:file-type-light-pnpm",
+    "PNPM": "vscode-icons:file-type-light-pnpm",
+    "npm": "logos:npm-icon",
+    "NPM": "logos:npm-icon",
+    "yarn": "vscode-icons:file-type-yarn",
+    "Yarn": "vscode-icons:file-type-yarn",
+    "bun": "vscode-icons:file-type-bun",
+    "Bun": "vscode-icons:file-type-bun",
+    "deno": "vscode-icons:file-type-light-deno",
+    "Deno": "vscode-icons:file-type-light-deno",
     // bundlers
-    rollup: "vscode-icons:file-type-rollup",
-    Rollup: "vscode-icons:file-type-rollup",
-    webpack: "vscode-icons:file-type-webpack",
-    Webpack: "vscode-icons:file-type-webpack",
-    vite: "vscode-icons:file-type-vite",
-    Vite: "vscode-icons:file-type-vite",
-    esbuild: "vscode-icons:file-type-esbuild",
-    Esbuild: "vscode-icons:file-type-esbuild",
+    "rollup": "vscode-icons:file-type-rollup",
+    "Rollup": "vscode-icons:file-type-rollup",
+    "webpack": "vscode-icons:file-type-webpack",
+    "Webpack": "vscode-icons:file-type-webpack",
+    "vite": "vscode-icons:file-type-vite",
+    "Vite": "vscode-icons:file-type-vite",
+    "esbuild": "vscode-icons:file-type-esbuild",
+    "Esbuild": "vscode-icons:file-type-esbuild",
     // frameworks
-    vue: "vscode-icons:file-type-vue",
-    Vue: "vscode-icons:file-type-vue",
-    svelte: "vscode-icons:file-type-svelte",
-    sveltekit: "vscode-icons:file-type-svelte",
-    angular: "vscode-icons:file-type-angular",
-    Angular: "vscode-icons:file-type-angular",
-    react: "vscode-icons:file-type-reactjs",
-    React: "vscode-icons:file-type-reactjs",
-    next: "vscode-icons:file-type-light-next",
-    Next: "vscode-icons:file-type-light-next",
-    Nextjs: "vscode-icons:file-type-light-next",
-    NextJS: "vscode-icons:file-type-light-next",
-    nuxt: "vscode-icons:file-type-nuxt",
-    Nuxt: "vscode-icons:file-type-nuxt",
-    Nuxtjs: "vscode-icons:file-type-nuxt",
-    NuxtJS: "vscode-icons:file-type-nuxt",
-    solid: "logos:solidjs-icon",
-    Solid: "logos:solidjs-icon",
-    solidjs: "logos:solidjs-icon",
-    astro: "vscode-icons:file-type-light-astro",
-    Astro: "vscode-icons:file-type-light-astro",
-    vitest: "vscode-icons:file-type-vitest",
-    Vitest: "vscode-icons:file-type-vitest",
-    playwright: "vscode-icons:file-type-playwright",
-    Playwright: "vscode-icons:file-type-playwright",
-    jest: "vscode-icons:file-type-jest",
-    Jest: "vscode-icons:file-type-jest",
-    cypress: "vscode-icons:file-type-cypress",
-    Cypress: "vscode-icons:file-type-cypress",
-    docker: "vscode-icons:file-type-docker",
-    Docker: "vscode-icons:file-type-docker",
+    "vue": "vscode-icons:file-type-vue",
+    "Vue": "vscode-icons:file-type-vue",
+    "svelte": "vscode-icons:file-type-svelte",
+    "Svelte": "vscode-icons:file-type-svelte",
+    "sveltekit": "vscode-icons:file-type-svelte",
+    "SvelteKit": "vscode-icons:file-type-svelte",
+    "angular": "vscode-icons:file-type-angular",
+    "Angular": "vscode-icons:file-type-angular",
+    "react": "vscode-icons:file-type-reactjs",
+    "React": "vscode-icons:file-type-reactjs",
+    "next": "vscode-icons:file-type-light-next",
+    "Next": "vscode-icons:file-type-light-next",
+    "Nextjs": "vscode-icons:file-type-light-next",
+    "NextJS": "vscode-icons:file-type-light-next",
+    "nuxt": "vscode-icons:file-type-nuxt",
+    "Nuxt": "vscode-icons:file-type-nuxt",
+    "Nuxtjs": "vscode-icons:file-type-nuxt",
+    "NuxtJS": "vscode-icons:file-type-nuxt",
+    "solid": "logos:solidjs-icon",
+    "Solid": "logos:solidjs-icon",
+    "solidjs": "logos:solidjs-icon",
+    "astro": "vscode-icons:file-type-light-astro",
+    "Astro": "vscode-icons:file-type-light-astro",
+    "vitest": "vscode-icons:file-type-vitest",
+    "Vitest": "vscode-icons:file-type-vitest",
+    "playwright": "vscode-icons:file-type-playwright",
+    "Playwright": "vscode-icons:file-type-playwright",
+    "jest": "vscode-icons:file-type-jest",
+    "Jest": "vscode-icons:file-type-jest",
+    "cypress": "vscode-icons:file-type-cypress",
+    "Cypress": "vscode-icons:file-type-cypress",
+    "docker": "vscode-icons:file-type-docker",
+    "Docker": "vscode-icons:file-type-docker",
     // TODO: code group title icons
     // programming languages
-    html: "vscode-icons:file-type-html",
-    Html: "vscode-icons:file-type-html",
-    HTML: "vscode-icons:file-type-html",
-    javascript: "vscode-icons:file-type-js-official",
-    Javascript: "vscode-icons:file-type-js-official",
-    JavaScript: "vscode-icons:file-type-js-official",
-    js: "vscode-icons:file-type-js-official",
-    JS: "vscode-icons:file-type-js-official",
-    typescript: "vscode-icons:file-type-typescript-official",
-    Typescript: "vscode-icons:file-type-typescript-official",
-    TypeScript: "vscode-icons:file-type-typescript-official",
-    ts: "vscode-icons:file-type-typescript-official",
-    TS: "vscode-icons:file-type-typescript-official",
-    css: "vscode-icons:file-type-css",
-    CSS: "vscode-icons:file-type-css",
-    less: "vscode-icons:file-type-less",
-    Less: "vscode-icons:file-type-less",
-    scss: "vscode-icons:file-type-scss",
-    Scss: "vscode-icons:file-type-scss",
-    SCSS: "vscode-icons:file-type-scss",
-    sass: "vscode-icons:file-type-sass",
-    Sass: "vscode-icons:file-type-sass",
-    SASS: "vscode-icons:file-type-sass",
-    stylus: "vscode-icons:file-type-light-stylus",
-    Stylus: "vscode-icons:file-type-light-stylus",
-    postcss: "vscode-icons:file-type-postcss",
-    Postcss: "vscode-icons:file-type-postcss",
-    PostCSS: "vscode-icons:file-type-postcss",
-    java: "vscode-icons:file-type-java",
-    Java: "vscode-icons:file-type-java",
-    JAVA: "vscode-icons:file-type-java",
-    php: "vscode-icons:file-type-php3",
-    PHP: "vscode-icons:file-type-php3",
-    c: "vscode-icons:file-type-c",
-    C: "vscode-icons:file-type-c",
-    python: "vscode-icons:file-type-python",
-    Python: "vscode-icons:file-type-python",
-    kotlin: "vscode-icons:file-type-kotlin",
-    Kotlin: "vscode-icons:file-type-kotlin",
-    go: "vscode-icons:file-type-go-gopher",
-    golang: "vscode-icons:file-type-go-gopher",
-    Go: "vscode-icons:file-type-go-gopher",
-    GoLang: "vscode-icons:file-type-go-gopher",
-    rust: "vscode-icons:file-type-rust",
-    Rust: "vscode-icons:file-type-rust",
-    zig: "vscode-icons:file-type-zig",
-    Zig: "vscode-icons:file-type-zig",
-    swift: "vscode-icons:file-type-swift",
-    Swift: "vscode-icons:file-type-swift"
+    "html": "vscode-icons:file-type-html",
+    "Html": "vscode-icons:file-type-html",
+    "HTML": "vscode-icons:file-type-html",
+    "javascript": "vscode-icons:file-type-js-official",
+    "Javascript": "vscode-icons:file-type-js-official",
+    "JavaScript": "vscode-icons:file-type-js-official",
+    "js": "vscode-icons:file-type-js-official",
+    "JS": "vscode-icons:file-type-js-official",
+    "typescript": "vscode-icons:file-type-typescript-official",
+    "Typescript": "vscode-icons:file-type-typescript-official",
+    "TypeScript": "vscode-icons:file-type-typescript-official",
+    "ts": "vscode-icons:file-type-typescript-official",
+    "TS": "vscode-icons:file-type-typescript-official",
+    "css": "vscode-icons:file-type-css",
+    "CSS": "vscode-icons:file-type-css",
+    "less": "vscode-icons:file-type-less",
+    "Less": "vscode-icons:file-type-less",
+    "scss": "vscode-icons:file-type-scss",
+    "Scss": "vscode-icons:file-type-scss",
+    "SCSS": "vscode-icons:file-type-scss",
+    "sass": "vscode-icons:file-type-sass",
+    "Sass": "vscode-icons:file-type-sass",
+    "SASS": "vscode-icons:file-type-sass",
+    "stylus": "vscode-icons:file-type-light-stylus",
+    "Stylus": "vscode-icons:file-type-light-stylus",
+    "postcss": "vscode-icons:file-type-postcss",
+    "Postcss": "vscode-icons:file-type-postcss",
+    "PostCSS": "vscode-icons:file-type-postcss",
+    "sh": "vscode-icons:file-type-shell",
+    "shell": "vscode-icons:file-type-shell",
+    "Shell": "vscode-icons:file-type-shell",
+    "bash": "vscode-icons:file-type-shell",
+    "Bash": "vscode-icons:file-type-shell",
+    "java": "vscode-icons:file-type-java",
+    "Java": "vscode-icons:file-type-java",
+    "JAVA": "vscode-icons:file-type-java",
+    "php": "vscode-icons:file-type-php3",
+    "PHP": "vscode-icons:file-type-php3",
+    "c": "vscode-icons:file-type-c",
+    "C": "vscode-icons:file-type-c",
+    "python": "vscode-icons:file-type-python",
+    "Python": "vscode-icons:file-type-python",
+    "kotlin": "vscode-icons:file-type-kotlin",
+    "Kotlin": "vscode-icons:file-type-kotlin",
+    "go": "vscode-icons:file-type-go-gopher",
+    "golang": "vscode-icons:file-type-go-gopher",
+    "Go": "vscode-icons:file-type-go-gopher",
+    "GoLang": "vscode-icons:file-type-go-gopher",
+    "rust": "vscode-icons:file-type-rust",
+    "Rust": "vscode-icons:file-type-rust",
+    "zig": "vscode-icons:file-type-zig",
+    "Zig": "vscode-icons:file-type-zig",
+    "swift": "vscode-icons:file-type-swift",
+    "Swift": "vscode-icons:file-type-swift",
+    "c#": "vscode-icons:file-type-csharp",
+    "CSharp": "vscode-icons:file-type-csharp",
+    "c++": "vscode-icons:file-type-cpp",
+    "C++": "vscode-icons:file-type-cpp",
+    "ruby": "vscode-icons:file-type-ruby",
+    "Ruby": "vscode-icons:file-type-ruby",
+    "makefile": "vscode-icons:file-type-makefile",
+    "Makefile": "vscode-icons:file-type-makefile",
+    "Object-C": "vscode-icons:file-type-objectivec",
+    "object-c": "vscode-icons:file-type-objectivec",
+    "SQL": "vscode-icons:file-type-sql",
+    "sql": "vscode-icons:file-type-sql",
+    "mysql": "vscode-icons:file-type-mysql",
+    "MySQL": "vscode-icons:file-type-mysql",
+    "MySql": "vscode-icons:file-type-mysql",
+    "pgsql": "vscode-icons:file-type-pgsql",
+    "PostgreSQL": "vscode-icons:file-type-pgsql",
+    "PGSQL": "vscode-icons:file-type-pgsql",
+    "xml": "vscode-icons:file-type-xml",
+    "XML": "vscode-icons:file-type-xml",
+    "wasm": "vscode-icons:file-type-wasm",
+    "webassembly": "vscode-icons:file-type-wasm",
+    "WebAssembly": "vscode-icons:file-type-wasm",
+    "WASM": "vscode-icons:file-type-wasm",
+    "toml": "vscode-icons:file-type-light-toml",
+    "Toml": "vscode-icons:file-type-light-toml",
+    "TOML": "vscode-icons:file-type-light-toml",
+    "yaml": "vscode-icons:file-type-light-yaml",
+    "Yaml": "vscode-icons:file-type-light-yaml",
+    "YAML": "vscode-icons:file-type-light-yaml"
   },
   folders: {
     "default": "vscode-icons:default-folder",
@@ -1177,7 +1046,7 @@ var definitions = {
   }
 };
 
-// src/node/features/fileTree/findIcon.ts
+// src/node/fileIcons/findIcon.ts
 function getFileIcon(fileName, type2 = "file") {
   const name = getFileIconName(fileName, type2);
   if (!name)
@@ -1222,9 +1091,138 @@ function getFileIconTypeFromExtension(fileName) {
   return void 0;
 }
 
-// src/node/features/fileTree/resolveTreeNodeInfo.ts
+// src/node/utils/stringifyProp.ts
+function stringifyProp(data) {
+  return JSON.stringify(data).replace(/'/g, "&#39");
+}
+
+// src/node/container/codeTabs.ts
+var codeTabs = (md, options = {}) => {
+  const getIcon = (filename) => {
+    if (options.icon === false)
+      return void 0;
+    const { named, extensions } = isPlainObject(options.icon) ? options.icon : {};
+    if (named === false && definitions.named[filename])
+      return void 0;
+    if (extensions === false && getFileIconTypeFromExtension(filename)) {
+      return void 0;
+    }
+    const hasNamed = named && named.length;
+    const hasExt = extensions && extensions.length;
+    if (hasNamed || hasExt) {
+      if (hasNamed && named.includes(filename))
+        return definitions.named[filename];
+      if (hasExt && extensions.some((ext) => filename.endsWith(ext)))
+        return getFileIconTypeFromExtension(filename);
+      return void 0;
+    }
+    return getFileIconName(filename);
+  };
+  tab(md, {
+    name: "code-tabs",
+    tabsOpenRenderer: ({ active, data }, tokens, index) => {
+      const { meta } = tokens[index];
+      const titles = data.map(({ title }) => md.renderInline(title));
+      const tabsData = data.map((item, dataIndex) => {
+        const { id = titles[dataIndex] } = item;
+        return { id };
+      });
+      const titlesContent = titles.map((title, index2) => {
+        const icon = getIcon(title);
+        return `<template #title${index2}="{ value, isActive }">${icon ? `<VPIcon name="${icon}"/>` : ""}<span>${title}</span></template>`;
+      }).join("");
+      return `<CodeTabs id="${index}" :data='${stringifyProp(tabsData)}'${active === -1 ? "" : ` :active="${active}"`}${meta.id ? ` tab-id="${meta.id}"` : ""}>${titlesContent}`;
+    },
+    tabsCloseRenderer: () => `</CodeTabs>`,
+    tabOpenRenderer: ({ index }, tokens, tokenIndex) => {
+      let foundFence = false;
+      for (let i = tokenIndex; i < tokens.length; i++) {
+        const { block, type: type2 } = tokens[i];
+        if (block) {
+          if (type2 === "code-tabs_tab_close")
+            break;
+          if ((type2 === "fence" || type2 === "import_code") && !foundFence) {
+            foundFence = true;
+            continue;
+          }
+          tokens[i].type = "code_tab_empty";
+          tokens[i].hidden = true;
+        }
+      }
+      return `<template #tab${index}="{ value, isActive }">`;
+    },
+    tabCloseRenderer: () => `</template>`
+  });
+};
+
+// src/node/container/fileTree.ts
 import Token from "markdown-it/lib/token.mjs";
+import container2 from "markdown-it-container";
 import { removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
+var type = "file-tree";
+var closeType = `container_${type}_close`;
+var componentName = "FileTreeItem";
+var itemOpen = "file_tree_item_open";
+var itemClose = "file_tree_item_close";
+var RE_SIMPLE_ICON = /:simple-icon\b/;
+var RE_COLORED_ICON = /:colored-icon\b/;
+function fileTreePlugin(md, options = {}) {
+  const getIcon = (filename, type2, mode) => {
+    mode ||= options.icon || "colored";
+    if (mode === "simple")
+      return type2 === "folder" ? defaultFolder : defaultFile;
+    return getFileIcon(filename, type2);
+  };
+  const validate = (info) => info.trim().startsWith(type);
+  const render = (tokens, idx) => {
+    const mode = getFileIconMode(tokens[idx].info);
+    if (tokens[idx].nesting === 1) {
+      const hasRes = [];
+      for (let i = idx + 1; !(tokens[i].nesting === -1 && tokens[i].type === closeType); ++i) {
+        const token = tokens[i];
+        if (token.type === "list_item_open") {
+          const result = resolveTreeNodeInfo(tokens, token, i);
+          if (result) {
+            hasRes.push(token.level);
+            const [info, inline] = result;
+            const { filename, type: type2, expanded, empty } = info;
+            const icon = getIcon(filename, type2, mode);
+            token.type = itemOpen;
+            token.tag = componentName;
+            token.attrSet("type", type2);
+            token.attrSet(":expanded", expanded ? "true" : "false");
+            token.attrSet(":empty", empty ? "true" : "false");
+            updateInlineToken(inline, info, icon);
+          } else {
+            hasRes.push(-1);
+          }
+        } else if (token.type === "list_item_close") {
+          if (token.level === hasRes.pop()) {
+            token.type = itemClose;
+            token.tag = componentName;
+          }
+        }
+      }
+      const title = resolveTitle(tokens[idx].info);
+      return `<div class="vp-file-tree">${title ? `<p class="vp-file-tree-title">${title}</p>` : ""}`;
+    } else {
+      return "</div>";
+    }
+  };
+  md.use(container2, type, { validate, render });
+}
+function getFileIconMode(info) {
+  if (RE_SIMPLE_ICON.test(info))
+    return "simple";
+  if (RE_COLORED_ICON.test(info))
+    return "colored";
+  return void 0;
+}
+function resolveTitle(info) {
+  info = info.trim().slice(type.length).trim();
+  info = info.replace(RE_SIMPLE_ICON, "").replace(RE_COLORED_ICON, "");
+  return info.trim();
+}
 function resolveTreeNodeInfo(tokens, current, idx) {
   let hasInline = false;
   let hasChildren = false;
@@ -1279,17 +1277,19 @@ function updateInlineToken(inline, info, icon) {
       if (token.content.includes(" ")) {
         const [first, ...other] = token.content.split(" ");
         const text = new Token("text", "", 0);
-        text.content = first;
+        text.content = removeEndingSlash(first);
         tokens.push(text);
         const comment = new Token("text", "", 0);
         comment.content = other.join(" ");
         children.unshift(comment);
       } else {
+        token.content = removeEndingSlash(token.content);
         tokens.push(token);
       }
       if (!isStrongTag)
         break;
     } else if (token.tag === "strong") {
+      token.content = removeEndingSlash(token.content);
       tokens.push(token);
       if (token.nesting === 1) {
         isStrongTag = true;
@@ -1312,133 +1312,7 @@ function updateInlineToken(inline, info, icon) {
   inline.children = tokens;
 }
 
-// src/node/features/fileTree/index.ts
-var type = "file-tree";
-var closeType = `container_${type}_close`;
-var componentName = "FileTreeItem";
-var itemOpen = "file_tree_item_open";
-var itemClose = "file_tree_item_close";
-function fileTreePlugin(md) {
-  const validate = (info) => info.trim().startsWith(type);
-  const render = (tokens, idx) => {
-    if (tokens[idx].nesting === 1) {
-      const hasRes = [];
-      for (let i = idx + 1; !(tokens[i].nesting === -1 && tokens[i].type === closeType); ++i) {
-        const token = tokens[i];
-        if (token.type === "list_item_open") {
-          const result = resolveTreeNodeInfo(tokens, token, i);
-          if (result) {
-            hasRes.push(token.level);
-            const [info2, inline] = result;
-            const { filename, type: type2, expanded, empty } = info2;
-            const icon = getFileIcon(filename, type2);
-            token.type = itemOpen;
-            token.tag = componentName;
-            token.attrSet("type", type2);
-            token.attrSet(":expanded", expanded ? "true" : "false");
-            token.attrSet(":empty", empty ? "true" : "false");
-            updateInlineToken(inline, info2, icon);
-          } else {
-            hasRes.push(-1);
-          }
-        } else if (token.type === "list_item_close") {
-          if (token.level === hasRes.pop()) {
-            token.type = itemClose;
-            token.tag = componentName;
-          }
-        }
-      }
-      const info = tokens[idx].info.trim();
-      const title = info.slice(type.length).trim();
-      return `<div class="vp-file-tree">${title ? `<p class="vp-file-tree-title">${title}</p>` : ""}`;
-    } else {
-      return "</div>";
-    }
-  };
-  md.use(container2, 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;
-  };
-}
-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
+// src/node/container/langRepl.ts
 import container3 from "markdown-it-container";
 import { fs as fs2, getDirname, path as path2 } from "vuepress/utils";
 var RE_INFO = /^(#editable)?(.*)$/;
@@ -1505,92 +1379,271 @@ 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 = ""]) {
-      const { attrs } = resolveAttrs(info);
+// src/node/container/tabs.ts
+import { tab as tab2 } from "@mdit/plugin-tab";
+var tabs = (md) => {
+  tab2(md, {
+    name: "tabs",
+    tabsOpenRenderer: ({ active, data }, tokens, index) => {
+      const { meta } = tokens[index];
+      const titles = data.map(({ title }) => md.renderInline(title));
+      const tabsData = data.map((item, dataIndex) => {
+        const { id = titles[dataIndex] } = item;
+        return { id };
+      });
+      return `<Tabs id="${index}" :data='${stringifyProp(tabsData)}'${active === -1 ? "" : ` :active="${active}"`}${meta.id ? ` tab-id="${meta.id}"` : ""}>
+${titles.map(
+        (title, titleIndex) => `<template #title${titleIndex}="{ value, isActive }">${title}</template>`
+      ).join("")}`;
+    },
+    tabsCloseRenderer: () => `</Tabs>`,
+    tabOpenRenderer: ({ index }) => `<template #tab${index}="{ value, isActive }">`,
+    tabCloseRenderer: () => `</template>`
+  });
+};
+
+// src/node/container/index.ts
+async function containerPlugin(app, md, options) {
+  alignPlugin(md);
+  tabs(md);
+  codeTabs(md, options.codeTabs);
+  if (options.repl)
+    await langReplPlugin(app, md, options.repl);
+  if (options.fileTree) {
+    fileTreePlugin(md, isPlainObject2(options.fileTree) ? options.fileTree : {});
+  }
+}
+
+// src/node/embed/caniuse.ts
+import container4 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(container4, 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: attrs2 } = 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 || "")
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "400px",
+        user,
+        slash,
+        title: attrs2.title,
+        preview: attrs2.preview,
+        editable: attrs2.editable,
+        tab: attrs2.tab ?? "result",
+        theme: attrs2.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: attrs2 } = resolveAttrs(info);
+      const [profile, filepath2 = ""] = source.split("#");
+      const [user, id] = profile.includes("/") ? profile.split("/") : ["", profile];
+      return {
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "500px",
+        user,
+        id,
+        title: attrs2.title ?? "",
+        console: attrs2.console ?? false,
+        navbar: attrs2.navbar ?? true,
+        layout: attrs2.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: attrs2 } = resolveAttrs(info);
+      const [user, id] = source.split("/");
+      return {
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "400px",
+        user,
+        id,
+        title: attrs2.title || "JS Fiddle",
+        tab: attrs2.tab?.replace(/\s+/g, "") || "js,css,html,result",
+        theme: attrs2.theme || "dark"
+      };
+    },
+    content: ({ title = "JS Fiddle", height, width, user, id, tab: tab3, theme }) => {
+      theme = theme === "dark" ? "/dark/" : "";
+      const link = `https://jsfiddle.net/${user}/${id}/embedded/${tab3}${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 = ""]) => {
-      const { attrs } = resolveAttrs(info);
+      const { attrs: attrs2 } = resolveAttrs(info);
       return {
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "450px",
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "450px",
         source: source.startsWith("@") ? source : `@${source}`,
-        title: attrs.title,
-        theme: attrs.theme || ""
+        title: attrs2.title,
+        theme: attrs2.theme || ""
       };
     },
     content({ title, height, width, source, theme }) {
@@ -1599,7 +1652,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: attrs2 } = resolveAttrs(info);
+      return {
+        src,
+        page: +page || 1,
+        noToolbar: Boolean(attrs2.noToolbar ?? false),
+        zoom: +attrs2.zoom || 50,
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "",
+        ratio: attrs2.ratio ? parseRect(attrs2.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,16 +1691,16 @@ 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
     syntaxPattern: /^@\[bilibili(?:\s+p(\d+))?([^\]]*)\]\(([^)]*)\)/,
     meta([, page, info = "", source = ""]) {
-      const { attrs } = resolveAttrs(info);
+      const { attrs: attrs2 } = resolveAttrs(info);
       const ids = source.trim().split(/\s+/);
       const bvid = ids.find((id) => id.startsWith("BV"));
       const [aid, cid] = ids.filter((id) => !id.startsWith("BV"));
@@ -1630,12 +1709,12 @@ var bilibiliPlugin = (md) => {
         bvid,
         aid,
         cid,
-        autoplay: attrs.autoplay ?? false,
-        time: timeToSeconds(attrs.time),
-        title: attrs.title,
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "",
-        ratio: attrs.ratio ? parseRect(attrs.ratio) : ""
+        autoplay: attrs2.autoplay ?? false,
+        time: timeToSeconds(attrs2.time),
+        title: attrs2.title,
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "",
+        ratio: attrs2.ratio ? parseRect(attrs2.ratio) : ""
       };
     },
     content(meta) {
@@ -1662,26 +1741,26 @@ 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([^\]]*)\]\(([^)]*)\)/,
     meta([, info = "", id = ""]) {
-      const { attrs } = resolveAttrs(info);
+      const { attrs: attrs2 } = resolveAttrs(info);
       return {
         id,
-        autoplay: attrs.autoplay ?? false,
-        loop: attrs.loop ?? false,
-        start: timeToSeconds(attrs.start),
-        end: timeToSeconds(attrs.end),
-        title: attrs.title,
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "",
-        ratio: attrs.ratio ? parseRect(attrs.ratio) : ""
+        autoplay: attrs2.autoplay ?? false,
+        loop: attrs2.loop ?? false,
+        start: timeToSeconds(attrs2.start),
+        end: timeToSeconds(attrs2.end),
+        title: attrs2.title,
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "",
+        ratio: attrs2.ratio ? parseRect(attrs2.ratio) : ""
       };
     },
     content(meta) {
@@ -1704,6 +1783,157 @@ 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/index.ts
+import { attrs } from "@mdit/plugin-attrs";
+import { footnote } from "@mdit/plugin-footnote";
+import { mark } from "@mdit/plugin-mark";
+import { sub } from "@mdit/plugin-sub";
+import { sup } from "@mdit/plugin-sup";
+import { tasklist } from "@mdit/plugin-tasklist";
+import { isPlainObject as isPlainObject3 } from "@vuepress/helper";
+
+// src/node/inline/icons.ts
+var [openTag, endTag] = [":[", "]:"];
+var iconsPlugin = (md, options = {}) => md.inline.ruler.before("emphasis", "iconify", createTokenizer(options));
+function createTokenizer(options) {
+  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, opt = ""] = content.split(/\s+/);
+    const [size = options.size, color = options.color] = opt.split("/");
+    const icon = state.push("vp_iconify_open", "VPIcon", 1);
+    icon.markup = openTag;
+    if (name)
+      icon.attrSet("name", name);
+    if (size)
+      icon.attrSet("size", String(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) {
+  md.use(attrs);
+  md.use(mark);
+  md.use(sub);
+  md.use(sup);
+  md.use(footnote);
+  md.use(tasklist);
+  if (options.icons) {
+    md.use(iconsPlugin, isPlainObject3(options.icons) ? options.icons : {});
+  }
+  if (options.plot === true || isPlainObject3(options.plot) && 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";
@@ -1715,6 +1945,10 @@ var CLIENT_FOLDER = ensureEndingSlash(
 async function prepareConfigFile(app, options) {
   const imports = /* @__PURE__ */ new Set();
   const enhances = /* @__PURE__ */ new Set();
+  imports.add(`import Tabs from '${CLIENT_FOLDER}components/Tabs.vue'`);
+  enhances.add(`app.component('Tabs', Tabs)`);
+  imports.add(`import CodeTabs from '${CLIENT_FOLDER}components/CodeTabs.vue'`);
+  enhances.add(`app.component('CodeTabs', CodeTabs)`);
   if (options.pdf) {
     imports.add(`import PDFViewer from '${CLIENT_FOLDER}components/PDFViewer.vue'`);
     enhances.add(`app.component('PDFViewer', PDFViewer)`);
@@ -1767,63 +2001,23 @@ ${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 {