vuepress-plugin-md-power 1.0.0-rc.96 → 1.0.0-rc.98

package/lib/node/index.js

@@ -1,3 +1,211 @@
+// src/node/features/imageSize.ts
+import { Buffer } from "node:buffer";
+import http from "node:https";
+import { URL } from "node:url";
+import { isLinkExternal, isLinkHttp } from "@vuepress/helper";
+import imageSize from "image-size";
+import { fs, path } from "vuepress/utils";
+
+// src/node/utils/resolveAttrs.ts
+var RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w-]+)(?:=\s*(?<quote>['"])(?<value>.+?)\k<quote>)?(?:\s+|$)/;
+function resolveAttrs(info) {
+  info = info.trim();
+  if (!info)
+    return { rawAttrs: "", attrs: {} };
+  const attrs = {};
+  const rawAttrs = info;
+  let matched;
+  while (matched = info.match(RE_ATTR_VALUE)) {
+    const { attr, value } = matched.groups || {};
+    attrs[attr] = value ?? true;
+    info = info.slice(matched[0].length);
+  }
+  Object.keys(attrs).forEach((key) => {
+    let value = attrs[key];
+    value = typeof value === "string" ? value.trim() : value;
+    if (value === "true")
+      value = true;
+    else if (value === "false")
+      value = false;
+    attrs[key] = value;
+    if (key.includes("-")) {
+      const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+      attrs[_key] = value;
+    }
+  });
+  return { attrs, rawAttrs };
+}
+
+// src/node/features/imageSize.ts
+var REG_IMG = /!\[.*?\]\(.*?\)/g;
+var REG_IMG_TAG = /<img(.*?)>/g;
+var REG_IMG_TAG_SRC = /src(?:set)?=(['"])(.+?)\1/g;
+var BADGE_LIST = [
+  "https://img.shields.io",
+  "https://badge.fury.io",
+  "https://badgen.net",
+  "https://forthebadge.com",
+  "https://vercel.com/button"
+];
+var cache = /* @__PURE__ */ new Map();
+async function imageSizePlugin(app, md, type2 = false) {
+  if (!app.env.isBuild || !type2)
+    return;
+  if (type2 === "all") {
+    try {
+      await scanRemoteImageSize(app);
+    } catch {
+    }
+  }
+  const imageRule = md.renderer.rules.image;
+  md.renderer.rules.image = (tokens, idx, options, env, self) => {
+    if (!env.filePathRelative || !env.filePath)
+      return imageRule(tokens, idx, options, env, self);
+    const token = tokens[idx];
+    const src = token.attrGet("src");
+    const width = token.attrGet("width");
+    const height = token.attrGet("height");
+    const size = resolveSize(src, width, height, env);
+    if (size) {
+      token.attrSet("width", `${size.width}`);
+      token.attrSet("height", `${size.height}`);
+    }
+    return imageRule(tokens, idx, options, env, self);
+  };
+  const rawHtmlBlockRule = md.renderer.rules.html_block;
+  const rawHtmlInlineRule = md.renderer.rules.html_inline;
+  md.renderer.rules.html_block = createHtmlRule(rawHtmlBlockRule);
+  md.renderer.rules.html_inline = createHtmlRule(rawHtmlInlineRule);
+  function createHtmlRule(rawHtmlRule) {
+    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);
+        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(" ");
+        return `<img ${imgAttrs}>`;
+      });
+      return rawHtmlRule(tokens, idx, options, env, self);
+    };
+  }
+  function resolveSize(src, width, height, env) {
+    if (!src || src.startsWith("data:"))
+      return false;
+    if (width && height)
+      return false;
+    const isExternal = isLinkExternal(src, env.base);
+    const filepath2 = isExternal ? src : resolveImageUrl(src, env, app);
+    if (isExternal) {
+      if (!cache.has(filepath2))
+        return false;
+    } else {
+      if (!cache.has(filepath2)) {
+        if (!fs.existsSync(filepath2))
+          return false;
+        const { width: w, height: h } = imageSize(filepath2);
+        if (!w || !h)
+          return false;
+        cache.set(filepath2, { width: w, height: h });
+      }
+    }
+    const { width: originalWidth, height: originalHeight } = cache.get(filepath2);
+    const ratio = originalWidth / originalHeight;
+    if (width && !height) {
+      const w = Number.parseInt(width, 10);
+      return { width: w, height: Math.round(w / ratio) };
+    } else if (height && !width) {
+      const h = Number.parseInt(height, 10);
+      return { width: Math.round(h * ratio), height: h };
+    } else {
+      return { width: originalWidth, height: originalHeight };
+    }
+  }
+}
+function resolveImageUrl(src, env, app) {
+  if (src[0] === "/")
+    return app.dir.public(src.slice(1));
+  if (env.filePathRelative && src[0] === ".")
+    return app.dir.source(path.join(path.dirname(env.filePathRelative), src));
+  if (env.filePath && (src[0] === "." || src[0] === "/"))
+    return path.resolve(env.filePath, src);
+  return path.resolve(src);
+}
+async function scanRemoteImageSize(app) {
+  if (!app.env.isBuild)
+    return;
+  const cwd = app.dir.source();
+  const files = await fs.readdir(cwd, { recursive: true });
+  const imgList = [];
+  for (const file of files) {
+    const filepath2 = path.join(cwd, file);
+    if ((await fs.stat(filepath2)).isFile() && !filepath2.includes(".vuepress") && !filepath2.includes("node_modules") && filepath2.endsWith(".md")) {
+      const content = await fs.readFile(filepath2, "utf-8");
+      const syntaxMatched = content.match(REG_IMG) ?? [];
+      for (const img of syntaxMatched) {
+        const src = img.slice(img.indexOf("](") + 2, -1);
+        addList(src.split(/\s+/)[0]);
+      }
+      const tagMatched = content.match(REG_IMG_TAG) ?? [];
+      for (const img of tagMatched) {
+        const src = img.match(REG_IMG_TAG_SRC)?.[2] ?? "";
+        addList(src);
+      }
+    }
+  }
+  function addList(src) {
+    if (src && isLinkHttp(src) && !imgList.includes(src) && !BADGE_LIST.some((badge) => src.startsWith(badge))) {
+      imgList.push(src);
+    }
+  }
+  await Promise.all(imgList.map(async (src) => {
+    if (!cache.has(src)) {
+      const { width, height } = await fetchImageSize(src);
+      if (width && height)
+        cache.set(src, { width, height });
+    }
+  }));
+}
+function fetchImageSize(src) {
+  const link = new URL(src);
+  return new Promise((resolve) => {
+    http.get(link, async (stream) => {
+      const chunks = [];
+      for await (const chunk of stream) {
+        chunks.push(chunk);
+        try {
+          const { width: width2, height: height2 } = imageSize(Buffer.concat(chunks));
+          if (width2 && height2) {
+            return resolve({ width: width2, height: height2 });
+          }
+        } catch {
+        }
+      }
+      const { width, height } = imageSize(Buffer.concat(chunks));
+      resolve({ width, height });
+    }).on("error", () => resolve({ width: 0, height: 0 }));
+  });
+}
+async function resolveImageSize(app, url, remote = false) {
+  if (cache.has(url))
+    return cache.get(url);
+  if (isLinkHttp(url) && remote) {
+    return await fetchImageSize(url);
+  }
+  if (url[0] === "/") {
+    const filepath2 = app.dir.public(url.slice(1));
+    if (fs.existsSync(filepath2)) {
+      const { width, height } = imageSize(filepath2);
+      return { width, height };
+    }
+  }
+  return { width: 0, height: 0 };
+}
+
 // src/node/plugin.ts
 import { addViteOptimizeDepsInclude } from "@vuepress/helper";
 
@@ -115,39 +323,6 @@ function resolveVersions(versions) {
   };
 }
 
-// src/node/features/pdf.ts
-import { path } from "vuepress/utils";
-
-// src/node/utils/resolveAttrs.ts
-var RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w-]+)(?:=\s*(?<quote>['"])(?<value>.+?)\k<quote>)?(?:\s+|$)/;
-function resolveAttrs(info) {
-  info = info.trim();
-  if (!info)
-    return { rawAttrs: "", attrs: {} };
-  const attrs = {};
-  const rawAttrs = info;
-  let matched;
-  while (matched = info.match(RE_ATTR_VALUE)) {
-    const { attr, value } = matched.groups || {};
-    attrs[attr] = value ?? true;
-    info = info.slice(matched[0].length);
-  }
-  Object.keys(attrs).forEach((key) => {
-    let value = attrs[key];
-    value = typeof value === "string" ? value.trim() : value;
-    if (value === "true")
-      value = true;
-    else if (value === "false")
-      value = false;
-    attrs[key] = value;
-    if (key.includes("-")) {
-      const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
-      attrs[_key] = value;
-    }
-  });
-  return { attrs, rawAttrs };
-}
-
 // src/node/utils/parseRect.ts
 function parseRect(str, unit = "px") {
   if (Number.parseFloat(str) === Number(str))
@@ -155,271 +330,67 @@ function parseRect(str, unit = "px") {
   return str;
 }
 
-// src/node/features/pdf.ts
-var pdfPlugin = (md) => {
+// src/node/features/codepen.ts
+var CODEPEN_LINK = "https://codepen.io/";
+var codepenPlugin = (md) => {
   createRuleBlock(md, {
-    type: "pdf",
-    // eslint-disable-next-line regexp/no-super-linear-backtracking
-    syntaxPattern: /^@\[pdf(?:\s+(\d+))?([^\]]*)\]\(([^)]*)\)/,
-    meta([, page, info = "", src = ""]) {
+    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: path.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}" />`;
-    }
-  });
-};
-
-// 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;
+    content: (meta) => {
+      const { title = "Codepen", height, width } = meta;
+      const params = new URLSearchParams();
+      if (meta.editable) {
+        params.set("editable", "true");
       }
-      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;
+      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>`;
     }
-    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/video/bilibili.ts
-import { URLSearchParams as URLSearchParams2 } from "node:url";
-
-// src/node/utils/timeToSeconds.ts
-function timeToSeconds(time) {
-  if (!time)
-    return 0;
-  if (Number.parseFloat(time) === Number(time))
-    return Number(time);
-  const [s, m, h] = time.split(":").reverse().map((n) => Number(n) || 0);
-  return s + m * 60 + h * 3600;
-}
-
-// src/node/features/video/bilibili.ts
-var BILIBILI_LINK = "https://player.bilibili.com/player.html";
-var bilibiliPlugin = (md) => {
+// src/node/features/codeSandbox.ts
+var codeSandboxPlugin = (md) => {
   createRuleBlock(md, {
-    type: "bilibili",
-    name: "video_bilibili",
-    // eslint-disable-next-line regexp/no-super-linear-backtracking
-    syntaxPattern: /^@\[bilibili(?:\s+p(\d+))?([^\]]*)\]\(([^)]*)\)/,
-    meta([, page, info = "", source = ""]) {
+    type: "codesandbox",
+    syntaxPattern: /^@\[codesandbox(?:\s+(embed|button))?([^\]]*)\]\(([^)]*)\)/,
+    meta([, type2, info = "", source = ""]) {
       const { attrs } = 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"));
+      const [profile, filepath2 = ""] = source.split("#");
+      const [user, id] = profile.includes("/") ? profile.split("/") : ["", profile];
       return {
-        page: +page || 1,
-        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) : ""
-      };
-    },
-    content(meta) {
-      const params = new URLSearchParams2();
-      if (meta.bvid) {
-        params.set("bvid", meta.bvid);
-      }
-      if (meta.aid) {
-        params.set("aid", meta.aid);
-      }
-      if (meta.cid) {
-        params.set("cid", meta.cid);
-      }
-      if (meta.page) {
-        params.set("p", meta.page.toString());
-      }
-      if (meta.time) {
-        params.set("t", meta.time.toString());
-      }
-      params.set("autoplay", meta.autoplay ? "1" : "0");
-      const source = `${BILIBILI_LINK}?${params.toString()}`;
-      return `<VideoBilibili src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
-    }
-  });
-};
-
-// src/node/features/video/youtube.ts
-import { URLSearchParams as URLSearchParams3 } from "node:url";
-var YOUTUBE_LINK = "https://www.youtube.com/embed/";
-var youtubePlugin = (md) => {
-  createRuleBlock(md, {
-    type: "youtube",
-    name: "video_youtube",
-    syntaxPattern: /^@\[youtube([^\]]*)\]\(([^)]*)\)/,
-    meta([, info = "", id = ""]) {
-      const { attrs } = 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) : ""
-      };
-    },
-    content(meta) {
-      const params = new URLSearchParams3();
-      if (meta.autoplay) {
-        params.set("autoplay", "1");
-      }
-      if (meta.loop) {
-        params.set("loop", "1");
-      }
-      if (meta.start) {
-        params.set("start", meta.start.toString());
-      }
-      if (meta.end) {
-        params.set("end", meta.end.toString());
-      }
-      const source = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
-      return `<VideoYoutube src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
-    }
-  });
-};
-
-// 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/replit.ts
-var replitPlugin = (md) => {
-  createRuleBlock(md, {
-    type: "replit",
-    syntaxPattern: /^@\[replit([^\]]*)\]\(([^)]*)\)/,
-    meta: ([, info = "", source = ""]) => {
-      const { attrs } = resolveAttrs(info);
-      return {
-        width: attrs.width ? parseRect(attrs.width) : "100%",
-        height: attrs.height ? parseRect(attrs.height) : "450px",
-        source: source.startsWith("@") ? source : `@${source}`,
-        title: attrs.title,
-        theme: attrs.theme || ""
-      };
-    },
-    content({ title, height, width, source, theme }) {
-      return `<ReplitViewer title="${title || ""}" height="${height}" width="${width}" source="${source}" theme="${theme}" />`;
-    }
-  });
-};
-
-// 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
+        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 }) {
@@ -428,302 +399,9 @@ var codeSandboxPlugin = (md) => {
   });
 };
 
-// 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/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;
-    }
-    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;
-  };
-}
-var plotPlugin = (md) => {
-  md.inline.ruler.before("emphasis", "plot", createTokenizer2());
-};
-
-// src/node/features/langRepl.ts
+// src/node/features/fileTree/index.ts
+import fs2 from "node:fs";
 import container2 from "markdown-it-container";
-import { fs, 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(container2, type2, { validate, render });
-}
-async function langReplPlugin(app, md, {
-  theme,
-  go = false,
-  kotlin = false,
-  rust = false
-}) {
-  if (kotlin) {
-    createReplContainer(md, "kotlin");
-  }
-  if (go) {
-    createReplContainer(md, "go");
-  }
-  if (rust) {
-    createReplContainer(md, "rust");
-  }
-  theme ??= { light: "github-light", dark: "github-dark" };
-  const data = { grammars: {} };
-  const themesPath = getDirname(import.meta.resolve("tm-themes"));
-  const grammarsPath = getDirname(import.meta.resolve("tm-grammars"));
-  const readTheme = (theme2) => read(path2.join(themesPath, "themes", `${theme2}.json`));
-  const readGrammar = (grammar) => read(path2.join(grammarsPath, "grammars", `${grammar}.json`));
-  if (typeof theme === "string") {
-    data.theme = await readTheme(theme);
-  } else {
-    data.theme = await Promise.all([
-      readTheme(theme.light),
-      readTheme(theme.dark)
-    ]).then(([light, dark]) => ({ light, dark }));
-  }
-  if (kotlin)
-    data.grammars.kotlin = await readGrammar("kotlin");
-  if (go)
-    data.grammars.go = await readGrammar("go");
-  if (rust)
-    data.grammars.rust = await readGrammar("rust");
-  await app.writeTemp(
-    "internal/md-power/replEditorData.js",
-    `export default ${JSON.stringify(data, null, 2)}`
-  );
-}
-async function read(file) {
-  try {
-    const content = await fs.readFile(file, "utf-8");
-    return JSON.parse(content);
-  } catch {
-  }
-  return void 0;
-}
-
-// src/node/prepareConfigFile.ts
-import { getDirname as getDirname2, path as path3 } from "vuepress/utils";
-import { ensureEndingSlash } from "@vuepress/helper";
-var { url: filepath } = import.meta;
-var __dirname = getDirname2(filepath);
-var CLIENT_FOLDER = ensureEndingSlash(
-  path3.resolve(__dirname, "../client")
-);
-async function prepareConfigFile(app, options) {
-  const imports = /* @__PURE__ */ new Set();
-  const enhances = /* @__PURE__ */ new Set();
-  if (options.pdf) {
-    imports.add(`import PDFViewer from '${CLIENT_FOLDER}components/PDFViewer.vue'`);
-    enhances.add(`app.component('PDFViewer', PDFViewer)`);
-  }
-  if (options.bilibili) {
-    imports.add(`import Bilibili from '${CLIENT_FOLDER}components/Bilibili.vue'`);
-    enhances.add(`app.component('VideoBilibili', Bilibili)`);
-  }
-  if (options.youtube) {
-    imports.add(`import Youtube from '${CLIENT_FOLDER}components/Youtube.vue'`);
-    enhances.add(`app.component('VideoYoutube', Youtube)`);
-  }
-  if (options.replit) {
-    imports.add(`import Replit from '${CLIENT_FOLDER}components/Replit.vue'`);
-    enhances.add(`app.component('ReplitViewer', Replit)`);
-  }
-  if (options.codeSandbox) {
-    imports.add(`import CodeSandbox from '${CLIENT_FOLDER}components/CodeSandbox.vue'`);
-    enhances.add(`app.component('CodeSandboxViewer', CodeSandbox)`);
-  }
-  if (options.plot) {
-    imports.add(`import Plot from '${CLIENT_FOLDER}components/Plot.vue'`);
-    enhances.add(`app.component('Plot', Plot)`);
-  }
-  if (options.repl) {
-    imports.add(`import CodeRepl from '${CLIENT_FOLDER}components/CodeRepl.vue'`);
-    enhances.add(`app.component('CodeRepl', CodeRepl)`);
-  }
-  if (options.caniuse) {
-    imports.add(`import CanIUse from '${CLIENT_FOLDER}components/CanIUse.vue'`);
-    enhances.add(`app.component('CanIUseViewer', CanIUse)`);
-  }
-  if (options.fileTree) {
-    imports.add(`import FileTreeItem from '${CLIENT_FOLDER}components/FileTreeItem.vue'`);
-    imports.add(`import '@internal/md-power/file-tree.css'`);
-    enhances.add(`app.component('FileTreeItem', FileTreeItem)`);
-  }
-  return app.writeTemp(
-    "md-power/config.js",
-    `import { defineClientConfig } from 'vuepress/client'
-${Array.from(imports.values()).join("\n")}
-
-export default defineClientConfig({
-  enhance({ router, app }) {
-${Array.from(enhances.values()).map((item) => `    ${item}`).join("\n")}
-  }
-})
-`
-  );
-}
-
-// src/node/features/fileTree/index.ts
-import fs2 from "node:fs";
-import container3 from "markdown-it-container";
-
-// src/node/features/fileTree/resolveTreeNodeInfo.ts
-import { removeLeadingSlash } from "vuepress/shared";
-import Token from "markdown-it/lib/token.mjs";
-function resolveTreeNodeInfo(tokens, current, idx) {
-  let hasInline = false;
-  let hasChildren = false;
-  let inline;
-  for (let i = idx + 1; !(tokens[i].level === current.level && tokens[i].type === "list_item_close"); ++i) {
-    if (tokens[i].type === "inline" && !hasInline) {
-      inline = tokens[i];
-      hasInline = true;
-    } else if (tokens[i].tag === "ul") {
-      hasChildren = true;
-    }
-    if (hasInline && hasChildren)
-      break;
-  }
-  if (!hasInline)
-    return void 0;
-  const children = inline.children?.filter((token) => token.type === "text" && token.content || token.tag === "strong") || [];
-  const filename = children.filter((token) => token.type === "text").map((token) => token.content).join(" ").split(/\s+/)[0] ?? "";
-  const focus = children[0]?.tag === "strong";
-  const type2 = hasChildren || filename.endsWith("/") ? "folder" : "file";
-  const info = {
-    filename: removeLeadingSlash(filename),
-    type: type2,
-    focus,
-    empty: !hasChildren,
-    expanded: type2 === "folder" && !filename.endsWith("/")
-  };
-  return [info, inline];
-}
-function updateInlineToken(inline, info, icon) {
-  const children = inline.children;
-  if (!children)
-    return;
-  const tokens = [];
-  const wrapperOpen = new Token("span_open", "span", 1);
-  const wrapperClose = new Token("span_close", "span", -1);
-  wrapperOpen.attrSet("class", `tree-node ${info.type}`);
-  tokens.push(wrapperOpen);
-  if (info.filename !== "..." && info.filename !== "\u2026") {
-    const iconOpen = new Token("span_open", "span", 1);
-    iconOpen.attrSet("class", icon);
-    const iconClose = new Token("span_close", "span", -1);
-    tokens.push(iconOpen, iconClose);
-  }
-  const fileOpen = new Token("span_open", "span", 1);
-  fileOpen.attrSet("class", `name${info.focus ? " focus" : ""}`);
-  tokens.push(fileOpen);
-  let isStrongTag = false;
-  while (children.length) {
-    const token = children.shift();
-    if (token.type === "text" && token.content) {
-      if (token.content.includes(" ")) {
-        const [first, ...other] = token.content.split(" ");
-        const text = new Token("text", "", 0);
-        text.content = first;
-        tokens.push(text);
-        const comment = new Token("text", "", 0);
-        comment.content = other.join(" ");
-        children.unshift(comment);
-      } else {
-        tokens.push(token);
-      }
-      if (!isStrongTag)
-        break;
-    } else if (token.tag === "strong") {
-      tokens.push(token);
-      if (token.nesting === 1) {
-        isStrongTag = true;
-      } else {
-        break;
-      }
-    } else {
-      tokens.push(token);
-    }
-  }
-  const fileClose = new Token("span_close", "span", -1);
-  tokens.push(fileClose);
-  if (children.filter((token) => token.type === "text" && token.content.trim()).length) {
-    const commentOpen = new Token("span_open", "span", 1);
-    commentOpen.attrSet("class", "comment");
-    const commentClose = new Token("span_close", "span", -1);
-    tokens.push(commentOpen, ...children, commentClose);
-  }
-  tokens.push(wrapperClose);
-  inline.children = tokens;
-}
 
 // src/node/features/fileTree/icons.ts
 var definitions = {
@@ -1323,118 +1001,618 @@ var FileIcons = {
   "seti:ignored": '<path d="M4.661 20.860L21.083 4.480Q21.335 3.934 21.335 3.682L21.335 3.682Q21.167 2.968 20.600 2.779Q20.033 2.590 19.361 3.010L19.361 3.010L16.715 5.656Q16.589 5.782 16.211 5.782L16.211 5.782Q13.943 4.900 11.738 4.921Q9.533 4.942 7.307 5.908L7.307 5.908Q3.191 7.714 0.335 12.082L0.335 12.082Q0.125 12.502 0.146 12.817Q0.167 13.132 0.461 13.384L0.461 13.384Q1.469 14.602 2.687 15.610L2.687 15.610Q3.485 16.282 5.039 17.332L5.039 17.332Q4.997 17.332 4.934 17.395Q4.871 17.458 4.787 17.458L4.787 17.458L4.115 18.088Q3.317 18.886 2.939 19.306L2.939 19.306Q2.519 19.768 2.687 20.482L2.687 20.482Q2.897 21.112 3.611 21.280L3.611 21.280Q4.283 21.280 4.661 20.860L4.661 20.860ZM7.811 14.560L6.887 15.484L6.635 15.484Q4.241 14.182 2.687 12.502L2.687 12.502Q4.955 9.520 7.559 8.134L7.559 8.134Q5.627 11.410 7.811 14.560L7.811 14.560ZM12.809 8.302L12.809 8.302Q12.599 8.932 11.885 8.932L11.885 8.932Q11.003 8.932 10.373 9.478Q9.743 10.024 9.659 10.906L9.659 10.906L9.659 11.284Q9.659 11.662 9.428 11.872Q9.197 12.082 8.840 12.082Q8.483 12.082 8.273 11.830Q8.063 11.578 8.063 11.158L8.063 11.158Q8.063 9.562 9.197 8.407Q10.331 7.252 11.885 7.252L11.885 7.252Q12.347 7.252 12.620 7.567Q12.893 7.882 12.809 8.302ZM23.561 11.956L23.561 11.956Q23.225 11.578 22.574 10.717Q21.923 9.856 21.587 9.478L21.587 9.478Q21.335 9.142 20.684 8.554Q20.033 7.966 19.739 7.630L19.739 7.630L18.185 9.184Q20.033 10.654 21.335 12.502L21.335 12.502Q21.083 12.754 20.957 12.754L20.957 12.754Q20.159 13.510 19.739 13.804L19.739 13.804Q15.623 17.122 10.961 16.534L10.961 16.534Q10.583 16.534 10.415 16.702L10.415 16.702Q9.911 17.206 9.659 17.584L9.659 17.584L8.861 18.382L8.987 18.382Q12.137 19.054 14.615 18.508L14.615 18.508Q19.739 17.626 23.561 13.132L23.561 13.132Q24.149 12.754 23.561 11.956Z"/>'
 };
 
-// src/node/features/fileTree/findIcon.ts
-var defaultFileIcon = {
-  name: "default",
-  svg: makeSVGIcon(FileIcons["seti:default"])
+// src/node/features/fileTree/findIcon.ts
+var defaultFileIcon = {
+  name: "default",
+  svg: makeSVGIcon(FileIcons["seti:default"])
+};
+var folderIcon = {
+  name: "folder",
+  svg: makeSVGIcon(FileIcons["seti:folder"])
+};
+function getFileIcon(fileName) {
+  const name = getFileIconName(fileName);
+  if (!name)
+    return defaultFileIcon;
+  if (name in FileIcons) {
+    const path5 = FileIcons[name];
+    return {
+      name: name.includes(":") ? name.split(":")[1] : name,
+      svg: makeSVGIcon(path5)
+    };
+  }
+  return defaultFileIcon;
+}
+function makeSVGIcon(svg) {
+  svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${svg}</svg>`.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/\{/g, "%7B").replace(/\}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E");
+  return `url("data:image/svg+xml,${svg}")`;
+}
+function getFileIconName(fileName) {
+  let icon = definitions.files[fileName];
+  if (icon)
+    return icon;
+  icon = getFileIconTypeFromExtension(fileName);
+  if (icon)
+    return icon;
+  for (const [partial, partialIcon] of Object.entries(definitions.partials)) {
+    if (fileName.includes(partial))
+      return partialIcon;
+  }
+  return icon;
+}
+function getFileIconTypeFromExtension(fileName) {
+  const firstDotIndex = fileName.indexOf(".");
+  if (firstDotIndex === -1)
+    return;
+  let extension = fileName.slice(firstDotIndex);
+  while (extension !== "") {
+    const icon = definitions.extensions[extension];
+    if (icon)
+      return icon;
+    const nextDotIndex = extension.indexOf(".", 1);
+    if (nextDotIndex === -1)
+      return;
+    extension = extension.slice(nextDotIndex);
+  }
+  return void 0;
+}
+
+// src/node/features/fileTree/resolveTreeNodeInfo.ts
+import Token from "markdown-it/lib/token.mjs";
+import { removeLeadingSlash } from "vuepress/shared";
+function resolveTreeNodeInfo(tokens, current, idx) {
+  let hasInline = false;
+  let hasChildren = false;
+  let inline;
+  for (let i = idx + 1; !(tokens[i].level === current.level && tokens[i].type === "list_item_close"); ++i) {
+    if (tokens[i].type === "inline" && !hasInline) {
+      inline = tokens[i];
+      hasInline = true;
+    } else if (tokens[i].tag === "ul") {
+      hasChildren = true;
+    }
+    if (hasInline && hasChildren)
+      break;
+  }
+  if (!hasInline)
+    return void 0;
+  const children = inline.children?.filter((token) => token.type === "text" && token.content || token.tag === "strong") || [];
+  const filename = children.filter((token) => token.type === "text").map((token) => token.content).join(" ").split(/\s+/)[0] ?? "";
+  const focus = children[0]?.tag === "strong";
+  const type2 = hasChildren || filename.endsWith("/") ? "folder" : "file";
+  const info = {
+    filename: removeLeadingSlash(filename),
+    type: type2,
+    focus,
+    empty: !hasChildren,
+    expanded: type2 === "folder" && !filename.endsWith("/")
+  };
+  return [info, inline];
+}
+function updateInlineToken(inline, info, icon) {
+  const children = inline.children;
+  if (!children)
+    return;
+  const tokens = [];
+  const wrapperOpen = new Token("span_open", "span", 1);
+  const wrapperClose = new Token("span_close", "span", -1);
+  wrapperOpen.attrSet("class", `tree-node ${info.type}`);
+  tokens.push(wrapperOpen);
+  if (info.filename !== "..." && info.filename !== "\u2026") {
+    const iconOpen = new Token("span_open", "span", 1);
+    iconOpen.attrSet("class", icon);
+    const iconClose = new Token("span_close", "span", -1);
+    tokens.push(iconOpen, iconClose);
+  }
+  const fileOpen = new Token("span_open", "span", 1);
+  fileOpen.attrSet("class", `name${info.focus ? " focus" : ""}`);
+  tokens.push(fileOpen);
+  let isStrongTag = false;
+  while (children.length) {
+    const token = children.shift();
+    if (token.type === "text" && token.content) {
+      if (token.content.includes(" ")) {
+        const [first, ...other] = token.content.split(" ");
+        const text = new Token("text", "", 0);
+        text.content = first;
+        tokens.push(text);
+        const comment = new Token("text", "", 0);
+        comment.content = other.join(" ");
+        children.unshift(comment);
+      } else {
+        tokens.push(token);
+      }
+      if (!isStrongTag)
+        break;
+    } else if (token.tag === "strong") {
+      tokens.push(token);
+      if (token.nesting === 1) {
+        isStrongTag = true;
+      } else {
+        break;
+      }
+    } else {
+      tokens.push(token);
+    }
+  }
+  const fileClose = new Token("span_close", "span", -1);
+  tokens.push(fileClose);
+  if (children.filter((token) => token.type === "text" && token.content.trim()).length) {
+    const commentOpen = new Token("span_open", "span", 1);
+    commentOpen.attrSet("class", "comment");
+    const commentClose = new Token("span_close", "span", -1);
+    tokens.push(commentOpen, ...children, commentClose);
+  }
+  tokens.push(wrapperClose);
+  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";
+var classPrefix = "vp-fti-";
+var styleFilepath = "internal/md-power/file-tree.css";
+async function fileTreePlugin(app, md) {
+  const validate = (info) => info.trim().startsWith(type);
+  const render = (tokens, idx) => {
+    if (tokens[idx].nesting === 1) {
+      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) {
+            const [info2, inline] = result;
+            const { filename, type: type2, expanded, empty } = info2;
+            const icon = type2 === "file" ? getFileIcon(filename) : folderIcon;
+            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, `${classPrefix}${icon.name}`);
+            addIcon(icon);
+          }
+        } else if (token.type === "list_item_close") {
+          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>";
+    }
+  };
+  let timer = null;
+  const icons = {};
+  function addIcon(icon) {
+    icons[icon.name] = icon;
+    if (timer)
+      clearTimeout(timer);
+    timer = setTimeout(async () => {
+      let content = "";
+      for (const icon2 of Object.values(icons)) {
+        content += `.${classPrefix}${icon2.name} { --icon: ${icon2.svg}; }
+`;
+      }
+      await app.writeTemp(styleFilepath, content);
+    }, 150);
+  }
+  md.use(container2, type, { validate, render });
+  if (!fs2.existsSync(app.dir.temp(styleFilepath)))
+    await app.writeTemp(styleFilepath, "");
+}
+
+// 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
+import container3 from "markdown-it-container";
+import { fs as fs3, 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 });
+}
+async function langReplPlugin(app, md, {
+  theme,
+  go = false,
+  kotlin = false,
+  rust = false
+}) {
+  if (kotlin) {
+    createReplContainer(md, "kotlin");
+  }
+  if (go) {
+    createReplContainer(md, "go");
+  }
+  if (rust) {
+    createReplContainer(md, "rust");
+  }
+  theme ??= { light: "github-light", dark: "github-dark" };
+  const data = { grammars: {} };
+  const themesPath = getDirname(import.meta.resolve("tm-themes"));
+  const grammarsPath = getDirname(import.meta.resolve("tm-grammars"));
+  const readTheme = (theme2) => read(path2.join(themesPath, "themes", `${theme2}.json`));
+  const readGrammar = (grammar) => read(path2.join(grammarsPath, "grammars", `${grammar}.json`));
+  if (typeof theme === "string") {
+    data.theme = await readTheme(theme);
+  } else {
+    data.theme = await Promise.all([
+      readTheme(theme.light),
+      readTheme(theme.dark)
+    ]).then(([light, dark]) => ({ light, dark }));
+  }
+  if (kotlin)
+    data.grammars.kotlin = await readGrammar("kotlin");
+  if (go)
+    data.grammars.go = await readGrammar("go");
+  if (rust)
+    data.grammars.rust = await readGrammar("rust");
+  await app.writeTemp(
+    "internal/md-power/replEditorData.js",
+    `export default ${JSON.stringify(data, null, 2)}`
+  );
+}
+async function read(file) {
+  try {
+    const content = await fs3.readFile(file, "utf-8");
+    return JSON.parse(content);
+  } catch {
+  }
+  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);
+      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/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;
+    }
+    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;
+  };
+}
+var plotPlugin = (md) => {
+  md.inline.ruler.before("emphasis", "plot", createTokenizer2());
+};
+
+// src/node/features/replit.ts
+var replitPlugin = (md) => {
+  createRuleBlock(md, {
+    type: "replit",
+    syntaxPattern: /^@\[replit([^\]]*)\]\(([^)]*)\)/,
+    meta: ([, info = "", source = ""]) => {
+      const { attrs } = resolveAttrs(info);
+      return {
+        width: attrs.width ? parseRect(attrs.width) : "100%",
+        height: attrs.height ? parseRect(attrs.height) : "450px",
+        source: source.startsWith("@") ? source : `@${source}`,
+        title: attrs.title,
+        theme: attrs.theme || ""
+      };
+    },
+    content({ title, height, width, source, theme }) {
+      return `<ReplitViewer title="${title || ""}" height="${height}" width="${width}" source="${source}" theme="${theme}" />`;
+    }
+  });
+};
+
+// src/node/features/video/bilibili.ts
+import { URLSearchParams as URLSearchParams2 } from "node:url";
+
+// src/node/utils/timeToSeconds.ts
+function timeToSeconds(time) {
+  if (!time)
+    return 0;
+  if (Number.parseFloat(time) === Number(time))
+    return Number(time);
+  const [s, m, h] = time.split(":").reverse().map((n) => Number(n) || 0);
+  return s + m * 60 + h * 3600;
+}
+
+// src/node/features/video/bilibili.ts
+var BILIBILI_LINK = "https://player.bilibili.com/player.html";
+var bilibiliPlugin = (md) => {
+  createRuleBlock(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 ids = source.trim().split(/\s+/);
+      const bvid = ids.find((id) => id.startsWith("BV"));
+      const [aid, cid] = ids.filter((id) => !id.startsWith("BV"));
+      return {
+        page: +page || 1,
+        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) : ""
+      };
+    },
+    content(meta) {
+      const params = new URLSearchParams2();
+      if (meta.bvid) {
+        params.set("bvid", meta.bvid);
+      }
+      if (meta.aid) {
+        params.set("aid", meta.aid);
+      }
+      if (meta.cid) {
+        params.set("cid", meta.cid);
+      }
+      if (meta.page) {
+        params.set("p", meta.page.toString());
+      }
+      if (meta.time) {
+        params.set("t", meta.time.toString());
+      }
+      params.set("autoplay", meta.autoplay ? "1" : "0");
+      const source = `${BILIBILI_LINK}?${params.toString()}`;
+      return `<VideoBilibili src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
+    }
+  });
 };
-var folderIcon = {
-  name: "folder",
-  svg: makeSVGIcon(FileIcons["seti:folder"])
+
+// src/node/features/video/youtube.ts
+import { URLSearchParams as URLSearchParams3 } from "node:url";
+var YOUTUBE_LINK = "https://www.youtube.com/embed/";
+var youtubePlugin = (md) => {
+  createRuleBlock(md, {
+    type: "youtube",
+    name: "video_youtube",
+    syntaxPattern: /^@\[youtube([^\]]*)\]\(([^)]*)\)/,
+    meta([, info = "", id = ""]) {
+      const { attrs } = 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) : ""
+      };
+    },
+    content(meta) {
+      const params = new URLSearchParams3();
+      if (meta.autoplay) {
+        params.set("autoplay", "1");
+      }
+      if (meta.loop) {
+        params.set("loop", "1");
+      }
+      if (meta.start) {
+        params.set("start", meta.start.toString());
+      }
+      if (meta.end) {
+        params.set("end", meta.end.toString());
+      }
+      const source = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
+      return `<VideoYoutube src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
+    }
+  });
 };
-function getFileIcon(fileName) {
-  const name = getFileIconName(fileName);
-  if (!name)
-    return defaultFileIcon;
-  if (name in FileIcons) {
-    const path4 = FileIcons[name];
-    return {
-      name: name.includes(":") ? name.split(":")[1] : name,
-      svg: makeSVGIcon(path4)
-    };
+
+// src/node/prepareConfigFile.ts
+import { ensureEndingSlash } from "@vuepress/helper";
+import { getDirname as getDirname2, path as path4 } from "vuepress/utils";
+var { url: filepath } = import.meta;
+var __dirname = getDirname2(filepath);
+var CLIENT_FOLDER = ensureEndingSlash(
+  path4.resolve(__dirname, "../client")
+);
+async function prepareConfigFile(app, options) {
+  const imports = /* @__PURE__ */ new Set();
+  const enhances = /* @__PURE__ */ new Set();
+  if (options.pdf) {
+    imports.add(`import PDFViewer from '${CLIENT_FOLDER}components/PDFViewer.vue'`);
+    enhances.add(`app.component('PDFViewer', PDFViewer)`);
   }
-  return defaultFileIcon;
-}
-function makeSVGIcon(svg) {
-  svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${svg}</svg>`.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/\{/g, "%7B").replace(/\}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E");
-  return `url("data:image/svg+xml,${svg}")`;
-}
-function getFileIconName(fileName) {
-  let icon = definitions.files[fileName];
-  if (icon)
-    return icon;
-  icon = getFileIconTypeFromExtension(fileName);
-  if (icon)
-    return icon;
-  for (const [partial, partialIcon] of Object.entries(definitions.partials)) {
-    if (fileName.includes(partial))
-      return partialIcon;
+  if (options.bilibili) {
+    imports.add(`import Bilibili from '${CLIENT_FOLDER}components/Bilibili.vue'`);
+    enhances.add(`app.component('VideoBilibili', Bilibili)`);
   }
-  return icon;
-}
-function getFileIconTypeFromExtension(fileName) {
-  const firstDotIndex = fileName.indexOf(".");
-  if (firstDotIndex === -1)
-    return;
-  let extension = fileName.slice(firstDotIndex);
-  while (extension !== "") {
-    const icon = definitions.extensions[extension];
-    if (icon)
-      return icon;
-    const nextDotIndex = extension.indexOf(".", 1);
-    if (nextDotIndex === -1)
-      return;
-    extension = extension.slice(nextDotIndex);
+  if (options.youtube) {
+    imports.add(`import Youtube from '${CLIENT_FOLDER}components/Youtube.vue'`);
+    enhances.add(`app.component('VideoYoutube', Youtube)`);
   }
-  return void 0;
-}
+  if (options.replit) {
+    imports.add(`import Replit from '${CLIENT_FOLDER}components/Replit.vue'`);
+    enhances.add(`app.component('ReplitViewer', Replit)`);
+  }
+  if (options.codeSandbox) {
+    imports.add(`import CodeSandbox from '${CLIENT_FOLDER}components/CodeSandbox.vue'`);
+    enhances.add(`app.component('CodeSandboxViewer', CodeSandbox)`);
+  }
+  if (options.plot) {
+    imports.add(`import Plot from '${CLIENT_FOLDER}components/Plot.vue'`);
+    enhances.add(`app.component('Plot', Plot)`);
+  }
+  if (options.repl) {
+    imports.add(`import CodeRepl from '${CLIENT_FOLDER}components/CodeRepl.vue'`);
+    enhances.add(`app.component('CodeRepl', CodeRepl)`);
+  }
+  if (options.caniuse) {
+    imports.add(`import CanIUse from '${CLIENT_FOLDER}components/CanIUse.vue'`);
+    enhances.add(`app.component('CanIUseViewer', CanIUse)`);
+  }
+  if (options.fileTree) {
+    imports.add(`import FileTreeItem from '${CLIENT_FOLDER}components/FileTreeItem.vue'`);
+    imports.add(`import '@internal/md-power/file-tree.css'`);
+    enhances.add(`app.component('FileTreeItem', FileTreeItem)`);
+  }
+  return app.writeTemp(
+    "md-power/config.js",
+    `import { defineClientConfig } from 'vuepress/client'
+${Array.from(imports.values()).join("\n")}
 
-// 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";
-var classPrefix = "vp-fti-";
-var styleFilepath = "internal/md-power/file-tree.css";
-async function fileTreePlugin(app, md) {
-  const validate = (info) => info.trim().startsWith(type);
-  const render = (tokens, idx) => {
-    if (tokens[idx].nesting === 1) {
-      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) {
-            const [info, inline] = result;
-            const { filename, type: type2, expanded, empty } = info;
-            const icon = type2 === "file" ? getFileIcon(filename) : folderIcon;
-            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, `${classPrefix}${icon.name}`);
-            addIcon(icon);
-          }
-        } else if (token.type === "list_item_close") {
-          token.type = itemClose;
-          token.tag = componentName;
-        }
-      }
-      return '<div class="vp-file-tree">';
-    } else {
-      return "</div>";
-    }
-  };
-  let timer = null;
-  const icons = {};
-  function addIcon(icon) {
-    icons[icon.name] = icon;
-    if (timer)
-      clearTimeout(timer);
-    timer = setTimeout(async () => {
-      let content = "";
-      for (const icon2 of Object.values(icons)) {
-        content += `.${classPrefix}${icon2.name} { --icon: ${icon2.svg}; }
-`;
-      }
-      await app.writeTemp(styleFilepath, content);
-    }, 150);
+export default defineClientConfig({
+  enhance({ router, app }) {
+${Array.from(enhances.values()).map((item) => `    ${item}`).join("\n")}
   }
-  md.use(container3, type, { validate, render });
-  if (!fs2.existsSync(app.dir.temp(styleFilepath)))
-    await app.writeTemp(styleFilepath, "");
+})
+`
+  );
 }
 
 // src/node/plugin.ts
@@ -1456,6 +1634,7 @@ function markdownPowerPlugin(options = {}) {
         }
       },
       extendsMarkdown: async (md, app2) => {
+        await imageSizePlugin(app2, md, options.imageSize);
         if (options.caniuse) {
           const caniuse = options.caniuse === true ? {} : options.caniuse;
           md.use(caniusePlugin, caniuse);
@@ -1498,5 +1677,6 @@ function markdownPowerPlugin(options = {}) {
   };
 }
 export {
-  markdownPowerPlugin
+  markdownPowerPlugin,
+  resolveImageSize
 };