vuepress-plugin-md-power 1.0.0-rc.134 → 1.0.0-rc.136

package/lib/client/components/CodeRepl.vue

@@ -134,7 +134,7 @@ function runCode() {
 }
 
 .code-repl-title h4 {
-  flex: 1;
+  flex: 1 2;
   padding: 0 12px;
   margin: 0;
   font-size: 14px;
@@ -175,7 +175,7 @@ function runCode() {
 }
 
 .output-head .title {
-  flex: 1;
+  flex: 1 2;
   margin-left: 10px;
   font-size: 14px;
   font-weight: 500;

package/lib/client/styles/demo.css

@@ -37,7 +37,7 @@
 
 .vp-demo-wrapper .demo-info .title::after {
   display: inline-block;
-  flex: 1;
+  flex: 1 2;
   height: 0;
   margin-left: 8px;
   content: "";
@@ -65,7 +65,7 @@
 
 .vp-demo-wrapper .demo-ctrl .extra {
   display: flex;
-  flex: 1;
+  flex: 1 2;
   gap: 16px;
   align-items: center;
   justify-content: flex-start;

package/lib/node/index.d.ts

@@ -181,6 +181,10 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     annotation?: boolean;
+    /**
+     * 是否启用 abbr 语法
+     * @default false
+     */
     abbr?: boolean;
     /**
      * 配置代码块分组
@@ -352,6 +356,8 @@ interface ArtPlayerTokenMeta extends SizeOptions {
     type?: string;
 }
 
+declare function createCodeTabIconGetter(options?: CodeTabsOptions): (filename: string) => string | void;
+
 interface ImgSize {
     width: number;
     height: number;
@@ -360,4 +366,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 
-export { type ArtPlayerTokenMeta, type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type DemoContainerRender, type DemoFile, type DemoMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownDemoEnv, type MarkdownPowerPluginOptions, type NpmToOptions, type NpmToPackageManager, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };
+export { type ArtPlayerTokenMeta, type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type DemoContainerRender, type DemoFile, type DemoMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownDemoEnv, type MarkdownPowerPluginOptions, type NpmToOptions, type NpmToPackageManager, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };

package/lib/node/index.js

@@ -1,275 +1,3 @@
-// src/node/enhance/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, logger, 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 attrs2 = {};
-  const rawAttrs = info;
-  let matched;
-  while (matched = info.match(RE_ATTR_VALUE)) {
-    const { attr, value } = matched.groups;
-    attrs2[attr] = value ?? true;
-    info = info.slice(matched[0].length);
-  }
-  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;
-    attrs2[key] = value;
-    if (key.includes("-")) {
-      const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
-      attrs2[_key] = value;
-    }
-  });
-  return { attrs: attrs2, rawAttrs };
-}
-
-// src/node/enhance/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") {
-    const start = performance.now();
-    try {
-      await scanRemoteImageSize(app);
-    } catch {
-    }
-    if (app.env.isDebug) {
-      logger.info(`[vuepress-plugin-md-power] imageSizePlugin: scan all images time spent: ${performance.now() - start}ms`);
-    }
-  }
-  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: attrs2 } = resolveAttrs(info);
-        const src = attrs2.src || attrs2.srcset;
-        const size = resolveSize(src, attrs2.width, attrs2.height, env);
-        if (!size)
-          return raw;
-        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);
-    };
-  }
-  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(fs.readFileSync(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(fs.readFileSync(filepath2));
-      return { width, height };
-    }
-  }
-  return { width: 0, height: 0 };
-}
-
-// src/node/plugin.ts
-import { addViteOptimizeDepsInclude } from "@vuepress/helper";
-import { isPackageExists as isPackageExists3 } from "local-pkg";
-
-// src/node/container/index.ts
-import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
-
-// src/node/container/createContainer.ts
-import container from "markdown-it-container";
-function createContainerPlugin(md, type2, options = {}) {
-  const render = (tokens, index) => {
-    const token = tokens[index];
-    const info = token.info.trim().slice(type2.length).trim() || "";
-    if (token.nesting === 1) {
-      return options.before?.(info, tokens, index) || `<div class="custom-container ${type2}">`;
-    } else {
-      return options.after?.(info, tokens, index) || "</div>";
-    }
-  };
-  md.use(container, type2, { render });
-}
-
-// src/node/container/align.ts
-var alignList = ["left", "center", "right", "justify"];
-function alignPlugin(md) {
-  for (const name of alignList) {
-    createContainerPlugin(md, name, {
-      before: () => `<div style="text-align:${name}">`
-    });
-  }
-}
-
-// src/node/container/card.ts
-function cardPlugin(md) {
-  createContainerPlugin(md, "card", {
-    before(info) {
-      const { attrs: attrs2 } = resolveAttrs(info);
-      const { title, icon } = attrs2;
-      return `<VPCard${title ? ` title="${title}"` : ""}${icon ? ` icon="${icon}"` : ""}>`;
-    },
-    after: () => "</VPCard>"
-  });
-  createContainerPlugin(md, "card-grid", {
-    before: () => "<VPCardGrid>",
-    after: () => "</VPCardGrid>"
-  });
-  createContainerPlugin(md, "card-masonry", {
-    before: (info) => {
-      const { attrs: attrs2 } = resolveAttrs(info);
-      let cols;
-      if (attrs2.cols) {
-        cols = attrs2.cols[0] === "{" ? attrs2.cols : Number.parseInt(`${attrs2.cols}`);
-      }
-      const gap = Number.parseInt(`${attrs2.gap}`);
-      return `<VPCardMasonry${cols ? ` :cols="${cols}"` : ""}${gap >= 0 ? ` :gap="${gap}"` : ""}>`;
-    },
-    after: () => "</VPCardMasonry>"
-  });
-}
-
 // src/node/container/codeTabs.ts
 import { tab } from "@mdit/plugin-tab";
 import { isPlainObject } from "@vuepress/helper";
@@ -1085,113 +813,401 @@ var definitions = {
     "TODO.txt": "vscode-icons:file-type-light-todo",
     "TODO.md": "vscode-icons:file-type-light-todo"
   }
-};
-
-// src/node/fileIcons/findIcon.ts
-function getFileIcon(fileName, type2) {
-  const name = getFileIconName(fileName, type2);
-  if (!name)
-    return type2 !== "folder" ? defaultFile : defaultFolder;
-  return name;
+};
+
+// src/node/fileIcons/findIcon.ts
+function getFileIcon(fileName, type2) {
+  const name = getFileIconName(fileName, type2);
+  if (!name)
+    return type2 !== "folder" ? defaultFile : defaultFolder;
+  return name;
+}
+function getFileIconName(fileName, type2 = "file") {
+  if (type2 === "folder") {
+    const icon2 = definitions.folders[fileName];
+    if (icon2)
+      return icon2;
+    if (fileName.includes("/"))
+      return definitions.folders[fileName.slice(fileName.lastIndexOf("/") + 1)];
+    return;
+  }
+  let icon = definitions.named[fileName] || definitions.files[fileName];
+  if (icon)
+    return icon;
+  icon = getFileIconTypeFromExtension(fileName) || void 0;
+  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);
+  }
+}
+
+// src/node/utils/cleanMarkdownEnv.ts
+function cleanMarkdownEnv(env) {
+  return {
+    base: env.base,
+    filePath: env.filePath,
+    filePathRelative: env.filePathRelative,
+    references: env.references,
+    abbreviations: env.abbreviations,
+    annotations: env.annotations
+  };
+}
+
+// src/node/utils/stringifyProp.ts
+function stringifyProp(data) {
+  return JSON.stringify(data).replace(/'/g, "&#39");
+}
+
+// src/node/container/codeTabs.ts
+function createCodeTabIconGetter(options = {}) {
+  const noop = () => void 0;
+  if (options.icon === false)
+    return noop;
+  const { named, extensions } = isPlainObject(options.icon) ? options.icon : {};
+  return function getIcon(filename) {
+    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);
+  };
+}
+var codeTabs = (md, options = {}) => {
+  const getIcon = createCodeTabIconGetter(options);
+  tab(md, {
+    name: "code-tabs",
+    tabsOpenRenderer: ({ active, data }, tokens, index, _, env) => {
+      const { meta } = tokens[index];
+      const titles = data.map(({ title }) => md.renderInline(title, cleanMarkdownEnv(env)));
+      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 { type: type2 } = tokens[i];
+        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/enhance/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, logger, 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 attrs2 = {};
+  const rawAttrs = info;
+  let matched;
+  while (matched = info.match(RE_ATTR_VALUE)) {
+    const { attr, value } = matched.groups;
+    attrs2[attr] = value ?? true;
+    info = info.slice(matched[0].length);
+  }
+  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;
+    attrs2[key] = value;
+    if (key.includes("-")) {
+      const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+      attrs2[_key] = value;
+    }
+  });
+  return { attrs: attrs2, rawAttrs };
+}
+
+// src/node/enhance/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") {
+    const start = performance.now();
+    try {
+      await scanRemoteImageSize(app);
+    } catch {
+    }
+    if (app.env.isDebug) {
+      logger.info(`[vuepress-plugin-md-power] imageSizePlugin: scan all images time spent: ${performance.now() - start}ms`);
+    }
+  }
+  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: attrs2 } = resolveAttrs(info);
+        const src = attrs2.src || attrs2.srcset;
+        const size = resolveSize(src, attrs2.width, attrs2.height, env);
+        if (!size)
+          return raw;
+        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);
+    };
+  }
+  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(fs.readFileSync(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 getFileIconName(fileName, type2 = "file") {
-  if (type2 === "folder") {
-    const icon2 = definitions.folders[fileName];
-    if (icon2)
-      return icon2;
-    if (fileName.includes("/"))
-      return definitions.folders[fileName.slice(fileName.lastIndexOf("/") + 1)];
+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);
+      }
+    }
   }
-  let icon = definitions.named[fileName] || definitions.files[fileName];
-  if (icon)
-    return icon;
-  icon = getFileIconTypeFromExtension(fileName) || void 0;
-  if (icon)
-    return icon;
-  for (const [partial, partialIcon] of Object.entries(definitions.partials)) {
-    if (fileName.includes(partial))
-      return partialIcon;
+  function addList(src) {
+    if (src && isLinkHttp(src) && !imgList.includes(src) && !BADGE_LIST.some((badge) => src.startsWith(badge))) {
+      imgList.push(src);
+    }
   }
-  return icon;
+  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 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);
+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(fs.readFileSync(filepath2));
+      return { width, height };
+    }
   }
+  return { width: 0, height: 0 };
 }
 
-// src/node/utils/stringifyProp.ts
-function stringifyProp(data) {
-  return JSON.stringify(data).replace(/'/g, "&#39");
-}
+// src/node/plugin.ts
+import { addViteOptimizeDepsInclude } from "@vuepress/helper";
+import { isPackageExists as isPackageExists3 } from "local-pkg";
 
-// 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;
+// src/node/container/index.ts
+import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
+
+// src/node/container/createContainer.ts
+import container from "markdown-it-container";
+function createContainerPlugin(md, type2, options = {}) {
+  const render = (tokens, index) => {
+    const token = tokens[index];
+    const info = token.info.trim().slice(type2.length).trim() || "";
+    if (token.nesting === 1) {
+      return options.before?.(info, tokens, index) || `<div class="custom-container ${type2}">`;
+    } else {
+      return options.after?.(info, tokens, index) || "</div>";
     }
-    return getFileIconName(filename);
   };
-  tab(md, {
-    name: "code-tabs",
-    tabsOpenRenderer: ({ active, data }, tokens, index, _, env) => {
-      const { meta } = tokens[index];
-      const titles = data.map(({ title }) => md.renderInline(title, env));
-      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}`;
+  md.use(container, type2, { render });
+}
+
+// src/node/container/align.ts
+var alignList = ["left", "center", "right", "justify"];
+function alignPlugin(md) {
+  for (const name of alignList) {
+    createContainerPlugin(md, name, {
+      before: () => `<div style="text-align:${name}">`
+    });
+  }
+}
+
+// src/node/container/card.ts
+function cardPlugin(md) {
+  createContainerPlugin(md, "card", {
+    before(info) {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { title, icon } = attrs2;
+      return `<VPCard${title ? ` title="${title}"` : ""}${icon ? ` icon="${icon}"` : ""}>`;
     },
-    tabsCloseRenderer: () => `</CodeTabs>`,
-    tabOpenRenderer: ({ index }, tokens, tokenIndex) => {
-      let foundFence = false;
-      for (let i = tokenIndex; i < tokens.length; i++) {
-        const { type: type2 } = tokens[i];
-        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;
+    after: () => "</VPCard>"
+  });
+  createContainerPlugin(md, "card-grid", {
+    before: () => "<VPCardGrid>",
+    after: () => "</VPCardGrid>"
+  });
+  createContainerPlugin(md, "card-masonry", {
+    before: (info) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      let cols;
+      if (attrs2.cols) {
+        cols = attrs2.cols[0] === "{" ? attrs2.cols : Number.parseInt(`${attrs2.cols}`);
       }
-      return `<template #tab${index}="{ value, isActive }">`;
+      const gap = Number.parseInt(`${attrs2.gap}`);
+      return `<VPCardMasonry${cols ? ` :cols="${cols}"` : ""}${gap >= 0 ? ` :gap="${gap}"` : ""}>`;
     },
-    tabCloseRenderer: () => `</template>`
+    after: () => "</VPCardMasonry>"
   });
-};
+}
 
 // src/node/container/demoWrapper.ts
 function demoWrapperPlugin(md) {
@@ -1760,7 +1776,7 @@ function parseArgs(line) {
           isNextValue = !isBool;
         }
         if (!isKey && !isNextValue) {
-          cmd += `${value}`;
+          cmd += ` ${value}`;
         } else {
           newLine += `${value}${i !== npmArgs.length - 1 ? v : ""}`;
           if (!isKey && isNextValue) {
@@ -1791,7 +1807,7 @@ var tabs = (md) => {
     name: "tabs",
     tabsOpenRenderer: ({ active, data }, tokens, index, _, env) => {
       const { meta } = tokens[index];
-      const titles = data.map(({ title }) => md.renderInline(title, env));
+      const titles = data.map(({ title }) => md.renderInline(title, cleanMarkdownEnv(env)));
       const tabsData = data.map((item, dataIndex) => {
         const { id = titles[dataIndex] } = item;
         return { id };
@@ -3116,7 +3132,7 @@ var abbrPlugin = (md) => {
   md.core.ruler.after("linkify", "abbr_replace", abbrReplace);
   md.renderer.rules.abbreviation = (tokens, idx, _, env) => {
     const { content, info } = tokens[idx];
-    return `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, env)}</template>` : ""}</Abbreviation>`;
+    return `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, cleanMarkdownEnv(env))}</template>` : ""}</Abbreviation>`;
   };
 };
 
@@ -3363,7 +3379,7 @@ async function prepareConfigFile(app, options) {
     enhances.add(`app.component('CodePenViewer', CodePen)`);
   }
   if (options.jsfiddle) {
-    imports.add(`import JSFiddle from '${CLIENT_FOLDER}components/JSFiddle.vue'`);
+    imports.add(`import JSFiddle from '${CLIENT_FOLDER}components/JsFiddle.vue'`);
     enhances.add(`app.component('JSFiddleViewer', JSFiddle)`);
   }
   if (options.replit) {
@@ -3480,6 +3496,7 @@ function markdownPowerPlugin(options = {}) {
   };
 }
 export {
+  createCodeTabIconGetter,
   markdownPowerPlugin,
   resolveImageSize
 };

package/lib/shared/index.d.ts

@@ -180,6 +180,10 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     annotation?: boolean;
+    /**
+     * 是否启用 abbr 语法
+     * @default false
+     */
     abbr?: boolean;
     /**
      * 配置代码块分组

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.134",
+  "version": "1.0.0-rc.136",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -31,16 +31,16 @@
     "lib"
   ],
   "peerDependencies": {
-    "artplayer": "^5.2.0",
+    "artplayer": "^5.2.2",
     "dashjs": "^5.0.0",
-    "esbuild": ">=0.24.2",
-    "hls.js": "^1.5.18",
-    "less": "^4.2.1",
-    "markdown-it": "^14.0.0",
-    "mpegts.js": "^1.8.0",
-    "sass": "^1.83.0",
-    "sass-embedded": "^1.83.0",
-    "stylus": ">=0.64.0",
+    "esbuild": "^0.25.1",
+    "hls.js": "^1.5.20",
+    "less": "^4.2.2",
+    "markdown-it": "^14.1.0",
+    "mpegts.js": "^1.7.3",
+    "sass": "^1.85.1",
+    "sass-embedded": "^1.85.1",
+    "stylus": "^0.64.0",
     "vuepress": "2.0.0-rc.20"
   },
   "peerDependenciesMeta": {
@@ -62,23 +62,23 @@
   },
   "dependencies": {
     "@mdit/plugin-attrs": "^0.16.7",
-    "@mdit/plugin-footnote": "^0.16.0",
+    "@mdit/plugin-footnote": "^0.16.8",
     "@mdit/plugin-mark": "^0.16.0",
     "@mdit/plugin-sub": "^0.16.0",
     "@mdit/plugin-sup": "^0.16.0",
     "@mdit/plugin-tab": "^0.16.0",
     "@mdit/plugin-tasklist": "^0.16.0",
-    "@vuepress/helper": "2.0.0-rc.79",
-    "@vueuse/core": "^12.7.0",
+    "@vuepress/helper": "2.0.0-rc.82",
+    "@vueuse/core": "^13.0.0",
     "chokidar": "3.6.0",
-    "image-size": "^2.0.0",
-    "local-pkg": "^1.1.0",
+    "image-size": "^2.0.1",
+    "local-pkg": "^1.1.1",
     "lru-cache": "^11.0.2",
     "markdown-it-container": "^4.0.0",
-    "nanoid": "^5.1.2",
-    "shiki": "^3.1.0",
-    "tm-grammars": "^1.22.19",
-    "tm-themes": "^1.9.14",
+    "nanoid": "^5.1.3",
+    "shiki": "^3.2.1",
+    "tm-grammars": "^1.23.3",
+    "tm-themes": "^1.10.1",
     "vue": "^3.5.13"
   },
   "devDependencies": {
@@ -86,7 +86,7 @@
     "artplayer": "^5.2.2",
     "dashjs": "^5.0.0",
     "hls.js": "^1.5.20",
-    "mpegts.js": "^1.8.0"
+    "mpegts.js": "1.7.3"
   },
   "publishConfig": {
     "access": "public"