vuepress-plugin-md-power 1.0.0-rc.143 → 1.0.0-rc.144

package/lib/node/index.js

@@ -816,14 +816,14 @@ var definitions = {
 };
 
 // src/node/fileIcons/findIcon.ts
-function getFileIcon(fileName, type2) {
-  const name = getFileIconName(fileName, type2);
+function getFileIcon(fileName, type) {
+  const name = getFileIconName(fileName, type);
   if (!name)
-    return type2 !== "folder" ? defaultFile : defaultFolder;
+    return type !== "folder" ? defaultFile : defaultFolder;
   return name;
 }
-function getFileIconName(fileName, type2 = "file") {
-  if (type2 === "folder") {
+function getFileIconName(fileName, type = "file") {
+  if (type === "folder") {
     const icon2 = definitions.folders[fileName];
     if (icon2)
       return icon2;
@@ -921,10 +921,10 @@ var codeTabs = (md, options = {}) => {
     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")
+        const { type } = tokens[i];
+        if (type === "code-tabs_tab_close")
           break;
-        if ((type2 === "fence" || type2 === "import_code") && !foundFence) {
+        if ((type === "fence" || type === "import_code") && !foundFence) {
           foundFence = true;
           continue;
         }
@@ -946,6 +946,7 @@ import imageSize from "image-size";
 import { fs, logger, path } from "vuepress/utils";
 
 // src/node/utils/resolveAttrs.ts
+import { camelCase } from "@pengzhanbo/utils";
 var RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w-]+)(?:=\s*(?<quote>['"])(?<value>.+?)\k<quote>)?(?:\s+|$)/;
 function resolveAttrs(info) {
   info = info.trim();
@@ -955,23 +956,15 @@ function resolveAttrs(info) {
   const rawAttrs = info;
   let matched;
   while (matched = info.match(RE_ATTR_VALUE)) {
-    const { attr, value } = matched.groups;
-    attrs2[attr] = value ?? true;
+    const { attr, value = true } = matched.groups;
+    let v = typeof value === "string" ? value.trim() : value;
+    if (v === "true")
+      v = true;
+    else if (v === "false")
+      v = false;
+    attrs2[camelCase(attr)] = v;
     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 };
 }
 
@@ -987,10 +980,10 @@ var BADGE_LIST = [
   "https://vercel.com/button"
 ];
 var cache = /* @__PURE__ */ new Map();
-async function imageSizePlugin(app, md, type2 = false) {
-  if (!app.env.isBuild || !type2)
+async function imageSizePlugin(app, md, type = false) {
+  if (!app.env.isBuild || !type)
     return;
-  if (type2 === "all") {
+  if (type === "all") {
     const start = performance.now();
     try {
       await scanRemoteImageSize(app);
@@ -1158,17 +1151,63 @@ import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
 
 // src/node/container/createContainer.ts
 import container from "markdown-it-container";
-function createContainerPlugin(md, type2, { before, after } = {}) {
+function createContainerPlugin(md, type, { before, after } = {}) {
   const render = (tokens, index, options, env) => {
     const token = tokens[index];
-    const info = token.info.trim().slice(type2.length).trim() || "";
+    const info = token.info.trim().slice(type.length).trim() || "";
     if (token.nesting === 1) {
-      return before?.(info, tokens, index, options, env) || `<div class="custom-container ${type2}">`;
+      return before?.(info, tokens, index, options, env) ?? `<div class="custom-container ${type}">`;
     } else {
-      return after?.(info, tokens, index, options, env) || "</div>";
+      return after?.(info, tokens, index, options, env) ?? "</div>";
     }
   };
-  md.use(container, type2, { render });
+  md.use(container, type, { render });
+}
+function createContainerSyntaxPlugin(md, type, render) {
+  const maker = ":";
+  const markerMinLen = 3;
+  function defineContainer(state, startLine, endLine, silent) {
+    const start = state.bMarks[startLine] + state.tShift[startLine];
+    const max = state.eMarks[startLine];
+    let pos = start;
+    if (state.src[pos] !== maker)
+      return false;
+    pos += markerMinLen;
+    for (pos = start + 1; pos <= max; pos++) {
+      if (state.src[pos] !== maker)
+        break;
+    }
+    if (pos - start < markerMinLen)
+      return false;
+    const markup = state.src.slice(start, pos);
+    const info = state.src.slice(pos, max).trim();
+    if (!info.startsWith(type))
+      return false;
+    if (silent)
+      return true;
+    let line = startLine;
+    let content = "";
+    while (++line < endLine) {
+      if (state.src.slice(state.bMarks[line], state.eMarks[line]).trim() === markup) {
+        break;
+      }
+      content += `${state.src.slice(state.bMarks[line], state.eMarks[line])}
+`;
+    }
+    const token = state.push(`${type}_container`, "", 0);
+    token.meta = resolveAttrs(info.slice(type.length)).attrs;
+    token.content = content;
+    token.markup = `${markup} ${type}`;
+    token.map = [startLine, line + 1];
+    state.line = line + 1;
+    return true;
+  }
+  const defaultRender = (tokens, index) => {
+    const { content } = tokens[index];
+    return `<div class="custom-container ${type}">${content}</div>`;
+  };
+  md.block.ruler.before("fence", `${type}_definition`, defineContainer);
+  md.renderer.rules[`${type}_container`] = render ?? defaultRender;
 }
 
 // src/node/container/align.ts
@@ -1181,13 +1220,37 @@ function alignPlugin(md) {
   }
 }
 
+// src/node/utils/stringifyAttrs.ts
+import { isBoolean, isNull, isNumber, isString, isUndefined, kebabCase } from "@pengzhanbo/utils";
+function stringifyAttrs(attrs2, withUndefined = false) {
+  const result = Object.entries(attrs2).map(([key, value]) => {
+    const k = kebabCase(key);
+    if (isUndefined(value) || value === "undefined")
+      return withUndefined ? `:${k}="undefined"` : "";
+    if (isNull(value) || value === "null")
+      return withUndefined ? `:${k}="null"` : "";
+    if (value === "true")
+      value = true;
+    if (value === "false")
+      value = false;
+    if (isBoolean(value))
+      return value ? `${k}` : "";
+    if (isNumber(value))
+      return `:${k}="${value}"`;
+    if (isString(value) && (value[0] === "{" || value[0] === "["))
+      return `:${k}="${value.replaceAll('"', "'")}"`;
+    const hasDynamic = key[0] === ":";
+    return `${hasDynamic ? ":" : ""}${k}="${String(value)}"`;
+  }).filter(Boolean).join(" ");
+  return result ? ` ${result}` : "";
+}
+
 // 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}"` : ""}>`;
+      return `<VPCard${stringifyAttrs(attrs2)}>`;
     },
     after: () => "</VPCard>"
   });
@@ -1198,63 +1261,17 @@ function cardPlugin(md) {
   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}"` : ""}>`;
+      if (attrs2.cols)
+        attrs2.cols = attrs2.cols[0] === "{" ? attrs2.cols : Number.parseInt(`${attrs2.cols}`);
+      if (attrs2.gap)
+        attrs2.gap = Number(attrs2.gap);
+      return `<VPCardMasonry${stringifyAttrs(attrs2)}>`;
     },
     after: () => "</VPCardMasonry>"
   });
 }
 
 // src/node/container/chat.ts
-var chatPlugin = (md) => {
-  md.block.ruler.before("fence", "chat_def", chatDef);
-  md.renderer.rules.chat_container = (tokens, idx, _, env) => {
-    const { meta, content } = tokens[idx];
-    const { title } = meta;
-    const messages = parseChatContent(content);
-    return `<div class="vp-chat">
-  <div class="vp-chat-header">
-    <p class="vp-chat-title">${title || "Chat"}</p>
-  </div>
-  <div class="vp-chat-content">
-    ${chatMessagesRender(md, env, messages)}
-  </div>
-</div>`;
-  };
-};
-function chatDef(state, startLine, endLine, silent) {
-  const start = state.bMarks[startLine] + state.tShift[startLine];
-  const max = state.eMarks[startLine];
-  let pos = start;
-  if (state.src.slice(pos, pos + 3) !== ":::")
-    return false;
-  pos += 3;
-  const info = state.src.slice(start + 3, max).trim();
-  if (!info.startsWith("chat"))
-    return false;
-  if (silent)
-    return true;
-  let line = startLine;
-  let content = "";
-  while (++line < endLine) {
-    if (state.src.slice(state.bMarks[line], state.eMarks[line]).trim() === ":::") {
-      break;
-    }
-    content += `${state.src.slice(state.bMarks[line], state.eMarks[line])}
-`;
-  }
-  const token = state.push("chat_container", "", 0);
-  token.meta = resolveAttrs(info).attrs;
-  token.content = content;
-  token.markup = "::: chat";
-  token.map = [startLine, line + 1];
-  state.line = line + 1;
-  return true;
-}
 function chatMessagesRender(md, env, messages) {
   let currentDate = "";
   return messages.map(({ sender, username, date, content }) => {
@@ -1303,6 +1320,18 @@ function parseChatContent(content) {
   }
   return messages;
 }
+var chatPlugin = (md) => createContainerSyntaxPlugin(
+  md,
+  "chat",
+  (tokens, idx, _, env) => `<div class="vp-chat">
+  <div class="vp-chat-header">
+    <p class="vp-chat-title">${tokens[idx].meta?.title || "Chat"}</p>
+  </div>
+  <div class="vp-chat-content">
+    ${chatMessagesRender(md, env, parseChatContent(tokens[idx].content))}
+  </div>
+</div>`
+);
 
 // src/node/container/collapse.ts
 function collapsePlugin(md) {
@@ -1311,14 +1340,14 @@ function collapsePlugin(md) {
       const { attrs: attrs2 } = resolveAttrs(info);
       const idx = parseCollapse(tokens, index, attrs2);
       const { accordion } = attrs2;
-      return `<VPCollapse${accordion ? " accordion" : ""}${idx !== void 0 ? ` :index="${idx}"` : ""}>`;
+      return `<VPCollapse${stringifyAttrs({ accordion, index: idx })}>`;
     },
     after: () => `</VPCollapse>`
   });
   md.renderer.rules.collapse_item_open = (tokens, idx) => {
     const token = tokens[idx];
     const { expand, index } = token.meta;
-    return `<VPCollapseItem${expand ? " expand" : ""}${` :index="${index}"`}>`;
+    return `<VPCollapseItem${stringifyAttrs({ expand, index })}>`;
   };
   md.renderer.rules.collapse_item_close = () => "</VPCollapseItem>";
   md.renderer.rules.collapse_item_title_open = () => "<template #title>";
@@ -1420,180 +1449,116 @@ function demoWrapperPlugin(md) {
 }
 
 // src/node/container/fileTree.ts
-import container2 from "markdown-it-container";
-import Token from "markdown-it/lib/token.mjs";
-import { removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
-var type = "file-tree";
-var closeType = `container_${type}_close`;
-var componentName = "FileTreeItem";
-var itemOpen = "file_tree_item_open";
-var itemClose = "file_tree_item_close";
+import { removeEndingSlash } from "vuepress/shared";
+function parseFileTreeRawContent(content) {
+  const root = { info: "", level: -1, children: [] };
+  const stack = [root];
+  const lines = content.trim().split("\n");
+  for (const line of lines) {
+    const match = line.match(/^(\s*)-(.*)$/);
+    if (!match)
+      continue;
+    const level = Math.floor(match[1].length / 2);
+    const info = match[2].trim();
+    while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+      stack.pop();
+    }
+    const parent = stack[stack.length - 1];
+    const node = { info, level, children: [] };
+    parent.children.push(node);
+    stack.push(node);
+  }
+  return root.children;
+}
+var RE_FOCUS = /^\*\*(.*)\*\*(?:$|\s+)/;
+function parseFileTreeNodeInfo(info) {
+  let filename = "";
+  let comment = "";
+  let focus = false;
+  let expanded = true;
+  let type = "file";
+  info = info.replace(RE_FOCUS, (_, matched) => {
+    filename = matched;
+    focus = true;
+    return "";
+  });
+  if (filename === "" && !focus) {
+    const spaceIndex = info.indexOf(" ");
+    filename = info.slice(0, spaceIndex === -1 ? info.length : spaceIndex);
+    info = spaceIndex === -1 ? "" : info.slice(spaceIndex);
+  }
+  comment = info.trim();
+  if (filename.endsWith("/")) {
+    type = "folder";
+    expanded = false;
+    filename = removeEndingSlash(filename);
+  }
+  return { filename, comment, focus, expanded, type };
+}
 function fileTreePlugin(md, options = {}) {
-  const getIcon = (filename, type2, mode) => {
+  const getIcon = (filename, type, mode) => {
     mode ||= options.icon || "colored";
     if (mode === "simple")
-      return type2 === "folder" ? defaultFolder : defaultFile;
-    return getFileIcon(filename, type2);
+      return type === "folder" ? defaultFolder : defaultFile;
+    return getFileIcon(filename, type);
   };
-  const render = (tokens, idx) => {
-    const { attrs: attrs2 } = resolveAttrs(tokens[idx].info.slice(type.length - 1));
-    if (tokens[idx].nesting === 1) {
-      const hasRes = [];
-      for (let i = idx + 1; !(tokens[i].nesting === -1 && tokens[i].type === closeType); ++i) {
-        const token = tokens[i];
-        if (token.type === "list_item_open") {
-          const result = resolveTreeNodeInfo(tokens, token, i);
-          if (result) {
-            hasRes.push(token.level);
-            const [info, inline] = result;
-            const { filename, type: type2, expanded, empty } = info;
-            const icon = getIcon(filename, type2, attrs2.icon);
-            token.type = itemOpen;
-            token.tag = componentName;
-            token.attrSet("type", type2);
-            token.attrSet(":expanded", expanded ? "true" : "false");
-            token.attrSet(":empty", empty ? "true" : "false");
-            updateInlineToken(inline, info, icon);
-          } else {
-            hasRes.push(-1);
-          }
-        } else if (token.type === "list_item_close") {
-          if (token.level === hasRes.pop()) {
-            token.type = itemClose;
-            token.tag = componentName;
-          }
-        }
-      }
-      const title = attrs2.title;
-      return `<div class="vp-file-tree">${title ? `<p class="vp-file-tree-title">${title}</p>` : ""}`;
-    } else {
-      return "</div>";
-    }
-  };
-  md.use(container2, type, { render });
-}
-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(removeEndingSlash(filename)),
-    type: type2,
-    focus,
-    empty: !hasChildren,
-    expanded: type2 === "folder" && !filename.endsWith("/")
-  };
-  return [info, inline];
-}
-function updateInlineToken(inline, info, icon) {
-  const children = inline.children;
-  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("vp_iconify_open", "VPIcon", 1);
-    iconOpen.attrSet("name", icon);
-    const iconClose = new Token("vp_iconify_close", "VPIcon", -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 = removeEndingSlash(first);
-        tokens.push(text);
-        const comment = new Token("text", "", 0);
-        comment.content = other.join(" ");
-        children.unshift(comment);
-      } else {
-        token.content = removeEndingSlash(token.content);
-        tokens.push(token);
-      }
-      if (!isStrongTag)
-        break;
-    } else if (token.tag === "strong") {
-      token.content = removeEndingSlash(token.content);
-      tokens.push(token);
-      if (token.nesting === 1) {
-        isStrongTag = true;
-      } else {
-        break;
-      }
-    } else {
-      tokens.push(token);
+  const renderFileTree = (nodes, meta) => nodes.map((node) => {
+    const { info, level, children } = node;
+    const { filename, comment, focus, expanded, type } = parseFileTreeNodeInfo(info);
+    const isOmit = filename === "\u2026" || filename === "...";
+    if (children.length === 0 && type === "folder") {
+      children.push({ info: "\u2026", level: level + 1, children: [] });
+    }
+    const nodeType = children.length > 0 ? "folder" : type;
+    const renderedComment = comment ? `<template #comment>${md.renderInline(comment.replaceAll("#", "#"))}</template>` : "";
+    const renderedIcon = !isOmit ? `<template #icon><VPIcon name="${getIcon(filename, nodeType, meta.icon)}" /></template>` : "";
+    const props = {
+      expanded: nodeType === "folder" ? expanded : false,
+      focus,
+      type: nodeType,
+      filename
+    };
+    return `<FileTreeNode${stringifyAttrs(props)}>
+${renderedIcon}${renderedComment}${children.length > 0 ? renderFileTree(children, meta) : ""}
+</FileTreeNode>`;
+  }).join("\n");
+  return createContainerSyntaxPlugin(
+    md,
+    "file-tree",
+    (tokens, index) => {
+      const token = tokens[index];
+      const nodes = parseFileTreeRawContent(token.content);
+      const meta = token.meta;
+      return `<div class="vp-file-tree">${meta.title ? `<p class="vp-file-tree-title">${meta.title}</p>` : ""}${renderFileTree(nodes, meta)}</div>
+`;
     }
-  }
-  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/container/langRepl.ts
 import { promises as fs2 } from "node:fs";
 import { resolveModule } from "local-pkg";
-import container3 from "markdown-it-container";
 import { colors, logger as logger2, 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");
-  }
+  const container3 = (lang) => createContainerPlugin(md, `${lang}-repl`, {
+    before(info) {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { editable, title } = attrs2;
+      return `<CodeRepl${stringifyAttrs({ editable, title: title || `${lang} playground` })}>`;
+    },
+    after: () => "</CodeRepl>"
+  });
+  if (kotlin)
+    container3("kotlin");
+  if (go)
+    container3("go");
+  if (rust)
+    container3("rust");
   theme ??= { light: "github-light", dark: "github-dark" };
   const data = { grammars: {} };
   try {
@@ -1634,7 +1599,9 @@ async function read(file) {
 
 // src/node/container/npmTo.ts
 import { isArray } from "@vuepress/helper";
-import container4 from "markdown-it-container";
+import { colors as colors2 } from "vuepress/utils";
+
+// src/node/container/npmToPreset.ts
 var ALLOW_LIST = ["npm", "pnpm", "yarn", "bun", "deno"];
 var BOOL_FLAGS = ["--no-save", "-B", "--save-bundle", "--save-dev", "-D", "--save-prod", "-P", "--save-peer", "-O", "--save-optional", "-E", "--save-exact", "-y", "--yes", "-g", "--global"];
 var DEFAULT_TABS = ["npm", "pnpm", "yarn"];
@@ -1818,28 +1785,32 @@ var MANAGERS_CONFIG = {
     deno: { cli: "deno install --frozen" }
   }
 };
+
+// src/node/container/npmTo.ts
 function npmToPlugins(md, options = {}) {
-  const type2 = "npm-to";
   const opt = isArray(options) ? { tabs: options } : options;
   const defaultTabs = opt.tabs?.length ? opt.tabs : DEFAULT_TABS;
-  const render = (tokens, idx) => {
-    const { attrs: attrs2 } = resolveAttrs(tokens[idx].info.trim().slice(type2.length));
-    const tabs2 = attrs2.tabs ? attrs2.tabs.split(/,\s*/) : defaultTabs;
-    if (tokens[idx].nesting === 1) {
+  createContainerPlugin(md, "npm-to", {
+    before: (info, tokens, idx, _opt, env) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const tabs2 = attrs2.tabs ? attrs2.tabs.split(/,\s*/) : defaultTabs;
       const token = tokens[idx + 1];
-      const info = token.info.trim();
       if (token.type === "fence") {
         const content = token.content;
         token.hidden = true;
         token.type = "text";
         token.content = "";
         const lines = content.split(/(\n|\s*&&\s*)/);
-        return md.render(resolveNpmTo(lines, info, idx, tabs2), {});
+        return md.render(
+          resolveNpmTo(lines, token.info.trim(), idx, tabs2),
+          cleanMarkdownEnv(env)
+        );
       }
-    }
-    return "";
-  };
-  md.use(container4, type2, { render });
+      console.warn(`${colors2.yellow("[vuepress-plugin-md-power]")} Invalid npm-to container in ${colors2.gray(env.filePathRelative || env.filePath)}`);
+      return "";
+    },
+    after: () => ""
+  });
 }
 function resolveNpmTo(lines, info, idx, tabs2) {
   tabs2 = validateTabs(tabs2);
@@ -2017,15 +1988,17 @@ function timelinePlugin(md) {
     before(info, tokens, index) {
       parseTimeline(tokens, index);
       const { attrs: attrs2 } = resolveAttrs(info);
-      const { horizontal, card, placement, line } = attrs2;
-      return `<VPTimeline${horizontal ? " horizontal" : ""}${card ? " card" : ' :card="undefined"'}${placement ? ` placement="${placement}"` : ""}${line ? ` line="${line}"` : ""}>`;
+      attrs2.card ??= void 0;
+      return `<VPTimeline${stringifyAttrs(attrs2, true)}>`;
     },
     after: () => "</VPTimeline>"
   });
   md.renderer.rules.timeline_item_open = (tokens, idx) => {
     const token = tokens[idx];
-    const { time, type: type2, icon, color, line, card, placement } = token.meta;
-    return `<VPTimelineItem${time ? ` time="${time}"` : ""}${type2 ? ` type="${type2}"` : ""}${color ? ` color="${color}"` : ""}${line ? ` line="${line}"` : ""}${icon ? ` icon="${icon}"` : ""}${card === "true" ? " card" : card === "false" ? "" : ' :card="undefined"'}${placement ? ` placement="${placement}"` : ""}>${icon ? `<template #icon><VPIcon name="${icon}"/></template>` : ""}`;
+    const attrs2 = token.meta;
+    attrs2.card ??= void 0;
+    const icon = attrs2.icon;
+    return `<VPTimelineItem${stringifyAttrs(attrs2, true)}>${icon ? `<template #icon><VPIcon name="${icon}"/></template>` : ""}`;
   };
   md.renderer.rules.timeline_item_close = () => "</VPTimelineItem>";
   md.renderer.rules.timeline_item_title_open = () => "<template #title>";
@@ -2125,20 +2098,20 @@ async function containerPlugin(app, md, options) {
 }
 
 // src/node/demo/demo.ts
-import container5 from "markdown-it-container";
+import container2 from "markdown-it-container";
 
 // src/node/embed/createEmbedRuleBlock.ts
 function createEmbedRuleBlock(md, {
-  type: type2,
-  name = type2,
+  type,
+  name = type,
   syntaxPattern,
   beforeName = "import_code",
   ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
   meta,
   content
 }) {
-  const MIN_LENGTH = type2.length + 5;
-  const START_CODES = [64, 91, ...type2.split("").map((c) => c.charCodeAt(0))];
+  const MIN_LENGTH = type.length + 5;
+  const START_CODES = [64, 91, ...type.split("").map((c) => c.charCodeAt(0))];
   md.block.ruler.before(
     beforeName,
     name,
@@ -2219,7 +2192,7 @@ function markdownEmbed(app, md, env, { url, title, desc, codeSetting = "", expan
   if (!env.demoFiles.some((d) => d.path === filepath2)) {
     env.demoFiles.push(demo);
   }
-  return `<VPDemoBasic type="markdown"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+  return `<VPDemoBasic${stringifyAttrs({ type: "markdown", title, desc, expanded })}>
     ${md.render(code, { filepath: env.filePath, filepathRelative: env.filePathRelative })}
     <template #code>
       ${md.render(`\`\`\`md ${codeSetting}
@@ -2232,7 +2205,7 @@ var markdownContainerRender = {
   before(app, md, env, meta, codeMap) {
     const { title, desc, expanded = false } = meta;
     const code = codeMap.md || "";
-    return `<VPDemoBasic type="markdown"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+    return `<VPDemoBasic${stringifyAttrs({ type: "markdown", title, desc, expanded })}>
       ${md.render(code, { filepath: env.filePath, filepathRelative: env.filePathRelative })}
       <template #code>`;
   },
@@ -2269,8 +2242,8 @@ var compiler = {
   }),
   stylus: importer(() => import("stylus"))
 };
-async function compileScript(source, type2) {
-  const key = `${type2}:::${source}`;
+async function compileScript(source, type) {
+  const key = `${type}:::${source}`;
   if (cache2.has(key))
     return cache2.get(key);
   const transform = await compiler.script();
@@ -2278,31 +2251,31 @@ async function compileScript(source, type2) {
     target: "es2018",
     platform: "browser",
     format: "cjs",
-    loader: type2 === "ts" ? "ts" : "js",
+    loader: type === "ts" ? "ts" : "js",
     sourcemap: false
   });
   cache2.set(key, res.code);
   return res.code;
 }
-async function compileStyle(source, type2) {
-  const key = `${type2}:::${source}`;
+async function compileStyle(source, type) {
+  const key = `${type}:::${source}`;
   if (cache2.has(key))
     return cache2.get(key);
-  if (type2 === "css")
+  if (type === "css")
     return source;
-  if (type2 === "less") {
+  if (type === "less") {
     const less = await compiler.less();
     const res = await less.render(source);
     cache2.set(key, res.css);
     return res.css;
   }
-  if (type2 === "scss") {
+  if (type === "scss") {
     const sass = await compiler.sass();
     const res = sass.compileString(source);
     cache2.set(key, res.css);
     return res.css;
   }
-  if (type2 === "stylus") {
+  if (type === "stylus") {
     const stylus = await compiler.stylus();
     const res = stylus.render(source);
     cache2.set(key, res);
@@ -2520,7 +2493,7 @@ function normalEmbed(app, md, env, { url, title, desc, codeSetting = "", expande
     env.demoFiles.push(demo);
     insertSetupScript({ ...demo, path: output }, env);
   }
-  return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+  return `<VPDemoNormal${stringifyAttrs({ ":config": name, title, desc, expanded })}>
     ${codeToHtml(md, source, codeSetting)}
   </VPDemoNormal>`;
 }
@@ -2538,7 +2511,7 @@ var normalContainerRender = {
     }
     const source = parseContainerCode(codeMap);
     compileCode(source, output);
-    return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>`;
+    return `<VPDemoNormal${stringifyAttrs({ ":config": name, title, desc, expanded })}>`;
   },
   after: () => "</VPDemoNormal>",
   token(token) {
@@ -2624,7 +2597,7 @@ function vueEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded =
     env.demoFiles.push(demo);
     insertSetupScript(demo, env);
   }
-  return `<VPDemoBasic type="vue"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+  return `<VPDemoBasic${stringifyAttrs({ type: "vue", title, desc, expanded })}>
     <${name} />
     <template #code>
       ${md.render(`\`\`\`${ext}${codeSetting}
@@ -2637,10 +2610,10 @@ var target3 = "md-power/demo/vue";
 var vueContainerRender = {
   before: (app, md, env, meta, codeMap) => {
     const { url, title, desc, expanded = false } = meta;
-    const componentName2 = `DemoContainer${url}`;
+    const componentName = `DemoContainer${url}`;
     const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
     env.demoFiles ??= [];
-    const output = app.dir.temp(path6.join(target3, `${prefix}-${componentName2}`));
+    const output = app.dir.temp(path6.join(target3, `${prefix}-${componentName}`));
     if (codeMap.vue || codeMap.js || codeMap.ts) {
       let scriptOutput = output;
       let content = "";
@@ -2655,7 +2628,7 @@ var vueContainerRender = {
         content = codeMap.js;
       }
       content = transformImports(content, env.filePath || "");
-      const script = { type: "vue", export: componentName2, path: scriptOutput, gitignore: true };
+      const script = { type: "vue", export: componentName, path: scriptOutput, gitignore: true };
       writeFileSync(scriptOutput, content);
       if (!env.demoFiles.some((d) => d.path === scriptOutput)) {
         env.demoFiles.push(script);
@@ -2685,8 +2658,8 @@ var vueContainerRender = {
         insertSetupScript(style, env);
       }
     }
-    return `<VPDemoBasic type="vue"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
-    <${componentName2} />
+    return `<VPDemoBasic${stringifyAttrs({ type: "vue", title, desc, expanded })}>
+    <${componentName} />
     <template #code>
 `;
   },
@@ -2716,24 +2689,24 @@ function demoEmbed(app, md) {
   createEmbedRuleBlock(md, {
     type: "demo",
     syntaxPattern: /^@\[demo(?:\s(vue|normal|markdown))?\s?(.*)\]\((.*)\)/,
-    meta: ([, type2, info, url]) => ({
-      type: type2 || "normal",
+    meta: ([, type, info, url]) => ({
+      type: type || "normal",
       url,
       ...resolveAttrs(info).attrs
     }),
     content: (meta, content, env) => {
-      const { url, type: type2 } = meta;
+      const { url, type } = meta;
       if (!url) {
         console.warn("[vuepress-plugin-md-power] Invalid demo url: ", url);
         return content;
       }
-      if (type2 === "vue") {
+      if (type === "vue") {
         return vueEmbed(app, md, env, meta);
       }
-      if (type2 === "normal") {
+      if (type === "normal") {
         return normalEmbed(app, md, env, meta);
       }
-      if (type2 === "markdown") {
+      if (type === "markdown") {
         return markdownEmbed(app, md, env, meta);
       }
       return content;
@@ -2767,7 +2740,7 @@ function demoContainer(app, md) {
       return res;
     }
   };
-  md.use(container5, "demo", { render });
+  md.use(container2, "demo", { render });
 }
 function parseCodeMapping(tokens, index, cb) {
   const codeMap = {};
@@ -2781,11 +2754,11 @@ function parseCodeMapping(tokens, index, cb) {
   return codeMap;
 }
 function getContainerMeta(info) {
-  const [, type2, raw] = (info.trim().slice(4).trim() || "").match(INFO_RE) || [];
+  const [, type, raw] = (info.trim().slice(4).trim() || "").match(INFO_RE) || [];
   const { attrs: attrs2 } = resolveAttrs(raw);
   return {
     url: "",
-    type: type2 || "normal",
+    type: type || "normal",
     ...attrs2
   };
 }
@@ -2795,7 +2768,7 @@ function extendsPageWithDemo(page) {
   const markdownEnv = page.markdownEnv;
   const demoFiles = markdownEnv.demoFiles ?? [];
   page.deps.push(
-    ...demoFiles.filter(({ type: type2 }) => type2 === "markdown").map(({ path: path9 }) => path9)
+    ...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path9 }) => path9)
   );
   (page.frontmatter.gitInclude ??= []).push(
     ...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path9 }) => path9)
@@ -2849,29 +2822,27 @@ var audioReader = (state, silent) => {
     state.posMax = labelEnd;
     const info = state.src.slice(labelStart, labelEnd).trim();
     const { attrs: attrs2 } = resolveAttrs(info);
-    const tokenOpen = state.push("audio_reader_open", "AudioReader", 1);
-    tokenOpen.info = info;
-    tokenOpen.attrs = [["src", href]];
-    if (attrs2.startTime)
-      tokenOpen.attrs.push([":start-time", attrs2.startTime]);
-    if (attrs2.endTime)
-      tokenOpen.attrs.push([":end-time", attrs2.endTime]);
-    if (attrs2.type)
-      tokenOpen.attrs.push(["type", attrs2.type]);
-    if (attrs2.volume)
-      tokenOpen.attrs.push([":volume", attrs2.volume]);
-    if (attrs2.title)
-      state.push("text", "", 0).content = attrs2.title;
-    state.push("audio_reader_close", "AudioReader", -1);
+    const token = state.push("audio_reader", "AudioReader", 0);
+    token.info = info;
+    token.meta = { src: href, ...attrs2 };
   }
   state.pos = pos + 1;
   state.posMax = max;
   return true;
 };
-var audioReaderPlugin = (md) => md.inline.ruler.before("link", "audio-reader", audioReader);
-
-// src/node/embed/caniuse.ts
-import container6 from "markdown-it-container";
+var audioReaderPlugin = (md) => {
+  md.renderer.rules.audio_reader = (tokens, idx) => {
+    const meta = tokens[idx].meta ?? {};
+    if (meta.startTime)
+      meta.startTime = Number(meta.startTime);
+    if (meta.endTime)
+      meta.endTime = Number(meta.endTime);
+    if (meta.volume)
+      meta.volume = Number(meta.volume);
+    return `<AudioReader${stringifyAttrs(meta)} />`;
+  };
+  md.inline.ruler.before("link", "audio-reader", audioReader);
+};
 
 // src/node/utils/nanoid.ts
 import { customAlphabet } from "nanoid";
@@ -2895,23 +2866,14 @@ function legacyCaniuse(md, { mode = "embed" } = {}) {
   const modeMap = ["image", "embed"];
   const isMode = (mode2) => modeMap.includes(mode2);
   mode = isMode(mode) ? mode : modeMap[0];
-  const type2 = "caniuse";
-  const validateReg = new RegExp(`^${type2}`);
-  const validate = (info) => {
-    return validateReg.test(info.trim());
-  };
-  const render = (tokens, index) => {
-    const token = tokens[index];
-    if (token.nesting === 1) {
-      const info = token.info.trim().slice(type2.length).trim() || "";
+  createContainerPlugin(md, "caniuse", {
+    before: (info) => {
       const feature = info.split(/\s+/)[0];
       const versions = info.match(/\{(.*)\}/)?.[1] || "";
       return feature ? resolveCanIUse({ feature, mode, versions }) : "";
-    } else {
-      return "";
-    }
-  };
-  md.use(container6, type2, { validate, render });
+    },
+    after: () => ""
+  });
 }
 function resolveCanIUse({ feature, mode, versions }) {
   if (!feature)
@@ -2928,7 +2890,7 @@ function resolveCanIUse({ feature, mode, versions }) {
   feature = feature.replace(UNDERLINE_RE, "_");
   const { past, future } = resolveVersions(versions);
   const meta = nanoid();
-  return `<CanIUseViewer feature="${feature}" meta="${meta}" past="${past}" future="${future}" />`;
+  return `<CanIUseViewer${stringifyAttrs({ feature, meta, past, future })} />`;
 }
 function resolveVersions(versions) {
   if (!versions)
@@ -2955,19 +2917,21 @@ var codepenPlugin = (md) => {
     type: "codepen",
     syntaxPattern: /^@\[codepen([^\]]*)\]\(([^)]*)\)/,
     meta: ([, info, source]) => {
-      const { width, height, title, tab: tab3, ...rest } = resolveAttrs(info).attrs;
+      const { width, height, title, tab: tab3, preview, editable, theme } = resolveAttrs(info).attrs;
       const [user, slash] = source.split("/");
       return {
+        title: title || "Code Pen",
+        tab: tab3 || "result",
         width: width ? parseRect(width) : "100%",
         height: height ? parseRect(height) : "400px",
         user,
         slash,
-        title: title || "Code Pen",
-        tab: tab3 || "result",
-        ...rest
+        preview,
+        editable,
+        theme
       };
     },
-    content: ({ title, height, width, user, slash, preview, editable, tab: tab3, theme }) => `<CodePenViewer user="${user}" slash="${slash}" title="${title}"${preview ? " preview" : ""}${editable ? " editable" : ""} tab="${tab3}"${theme ? ` theme="${theme}"` : ""} width="${width}" height="${height}" />`
+    content: (meta) => `<CodePenViewer${stringifyAttrs(meta)} />`
   });
 };
 
@@ -2976,7 +2940,7 @@ var codeSandboxPlugin = (md) => {
   createEmbedRuleBlock(md, {
     type: "codesandbox",
     syntaxPattern: /^@\[codesandbox(?:\s+(embed|button))?([^\]]*)\]\(([^)]*)\)/,
-    meta([, type2, info, source]) {
+    meta([, type, info, source]) {
       const { attrs: attrs2 } = resolveAttrs(info);
       const [profile, filepath2 = ""] = source.split("#");
       const [user, id] = profile.includes("/") ? profile.split("/") : ["", profile];
@@ -2989,13 +2953,11 @@ var codeSandboxPlugin = (md) => {
         console: attrs2.console ?? false,
         navbar: attrs2.navbar ?? true,
         layout: attrs2.layout ?? "",
-        type: type2 || "embed",
+        type: type || "embed",
         filepath: filepath2
       };
     },
-    content({ title, height, width, user, id, type: type2, filepath: filepath2, console: console2, navbar, layout }) {
-      return `<CodeSandboxViewer title="${title}" height="${height}" width="${width}" user="${user}" id="${id}" type="${type2}" filepath="${filepath2}" :console=${console2} :navbar=${navbar} layout="${layout}" />`;
-    }
+    content: (meta) => `<CodeSandboxViewer${stringifyAttrs(meta)} />`
   });
 };
 
@@ -3015,7 +2977,7 @@ var jsfiddlePlugin = (md) => {
         theme
       };
     },
-    content: ({ title, height, width, source, tab: tab3, theme }) => `<JSFiddleViewer source="${source}" title="${title}" tab="${tab3}" width="${width}" height="${height}"${theme ? ` theme="${theme}"` : ""} />`
+    content: (meta) => `<JSFiddleViewer${stringifyAttrs(meta)} />`
   });
 };
 
@@ -3034,9 +2996,7 @@ var replitPlugin = (md) => {
         theme: attrs2.theme || ""
       };
     },
-    content({ title, height, width, source, theme }) {
-      return `<ReplitViewer title="${title || ""}" height="${height}" width="${width}" source="${source}" theme="${theme}" />`;
-    }
+    content: (meta) => `<ReplitViewer${stringifyAttrs(meta)} />`
   });
 };
 
@@ -3060,15 +3020,13 @@ var pdfPlugin = (md) => {
         title: path7.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}" />`;
-    }
+    content: (meta) => `<PDFViewer${stringifyAttrs(meta)} />`
   });
 };
 
 // src/node/embed/video/artPlayer.ts
 import { isPackageExists as isPackageExists2 } from "local-pkg";
-import { colors as colors2 } from "vuepress/utils";
+import { colors as colors3 } from "vuepress/utils";
 var installed = {
   dashjs: isPackageExists2("dashjs"),
   hlsjs: isPackageExists2("hls.js"),
@@ -3085,6 +3043,8 @@ var artPlayerPlugin = (md) => {
       const url = source.trim();
       checkSupportType(attrs2.type ?? url.split(".").pop());
       return {
+        url,
+        type: attrs2.type,
         autoplay: attrs2.autoplay ?? false,
         muted: attrs2.muted ?? attrs2.autoplay ?? false,
         autoMini: attrs2.autoMini ?? false,
@@ -3092,23 +3052,22 @@ var artPlayerPlugin = (md) => {
         volume: typeof attrs2.volume !== "undefined" ? Number(attrs2.volume) : 0.75,
         poster: attrs2.poster,
         width: attrs2.width ? parseRect(attrs2.width) : "100%",
-        height: attrs2.height ? parseRect(attrs2.height) : "",
-        ratio: attrs2.ratio ? parseRect(`${attrs2.ratio}`) : "",
-        type: attrs2.type,
-        url
+        height: attrs2.height ? parseRect(attrs2.height) : void 0,
+        ratio: attrs2.ratio ? parseRect(`${attrs2.ratio}`) : void 0
       };
     },
-    content({ autoMini, autoplay, loop, muted, poster, url, type: type2, volume, width, height, ratio }) {
-      return `<ArtPlayer src="${url}" fullscreen flip playback-rate aspect-ratio setting pip ${loop ? " loop" : ""}${type2 ? ` type="${type2}"` : ""}${autoMini ? " auto-min" : ""}${autoplay ? " autoplay" : ""}${muted || autoplay ? " muted" : ""}${poster ? ` poster="${poster}"` : ""}  :volume="${volume}" width="${width}"${height ? ` height="${height}"` : ""}${ratio ? ` ratio="${ratio}"` : ""}/>`;
+    content({ url, ...meta }) {
+      meta.muted = meta.muted || meta.autoplay;
+      return `<ArtPlayer src="${url}" fullscreen flip playback-rate aspect-ratio setting pip${stringifyAttrs(meta)}/>`;
     }
   });
 };
-function checkSupportType(type2) {
-  if (!type2)
+function checkSupportType(type) {
+  if (!type)
     return;
-  if (SUPPORTED_VIDEO_TYPES.includes(type2)) {
+  if (SUPPORTED_VIDEO_TYPES.includes(type)) {
     let name = "";
-    switch (type2.toLowerCase()) {
+    switch (type.toLowerCase()) {
       case "m3u8":
       case "hls":
         name = !installed.hlsjs ? "hls.js" : "";
@@ -3124,10 +3083,10 @@ function checkSupportType(type2) {
         break;
     }
     if (name) {
-      console.warn(`${colors2.yellow("[vuepress-plugin-md-power] artPlayer: ")} ${colors2.cyan(name)} is not installed, please install it via npm or yarn or pnpm`);
+      console.warn(`${colors3.yellow("[vuepress-plugin-md-power] artPlayer: ")} ${colors3.cyan(name)} is not installed, please install it via npm or yarn or pnpm`);
     }
   } else {
-    console.warn(`${colors2.yellow("[vuepress-plugin-md-power] artPlayer: ")} unsupported video type: ${colors2.cyan(type2)}`);
+    console.warn(`${colors3.yellow("[vuepress-plugin-md-power] artPlayer: ")} unsupported video type: ${colors3.cyan(type)}`);
   }
 }
 
@@ -3166,31 +3125,27 @@ var bilibiliPlugin = (md) => {
         time: timeToSeconds(attrs2.time),
         title: attrs2.title,
         width: attrs2.width ? parseRect(attrs2.width) : "100%",
-        height: attrs2.height ? parseRect(attrs2.height) : "",
-        ratio: attrs2.ratio ? parseRect(attrs2.ratio) : ""
+        height: attrs2.height ? parseRect(attrs2.height) : void 0,
+        ratio: attrs2.ratio ? parseRect(attrs2.ratio) : void 0
       };
     },
     content(meta) {
       const params = new URLSearchParams();
-      if (meta.bvid) {
+      if (meta.bvid)
         params.set("bvid", meta.bvid);
-      }
-      if (meta.aid) {
+      if (meta.aid)
         params.set("aid", meta.aid);
-      }
-      if (meta.cid) {
+      if (meta.cid)
         params.set("cid", meta.cid);
-      }
-      if (meta.page) {
+      if (meta.page)
         params.set("p", meta.page.toString());
-      }
-      if (meta.time) {
+      if (meta.time)
         params.set("t", meta.time.toString());
-      }
       params.set("autoplay", meta.autoplay ? "1" : "0");
       params.set("high_quality", "1");
       const source = `${BILIBILI_LINK}?${params.toString()}`;
-      return `<VideoBilibili src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
+      const { width, height, ratio, title } = meta;
+      return `<VideoBilibili${stringifyAttrs({ src: source, width, height, ratio, title })} />`;
     }
   });
 };
@@ -3213,26 +3168,23 @@ var youtubePlugin = (md) => {
         end: timeToSeconds(attrs2.end),
         title: attrs2.title,
         width: attrs2.width ? parseRect(attrs2.width) : "100%",
-        height: attrs2.height ? parseRect(attrs2.height) : "",
-        ratio: attrs2.ratio ? parseRect(attrs2.ratio) : ""
+        height: attrs2.height ? parseRect(attrs2.height) : void 0,
+        ratio: attrs2.ratio ? parseRect(attrs2.ratio) : void 0
       };
     },
     content(meta) {
       const params = new URLSearchParams2();
-      if (meta.autoplay) {
+      if (meta.autoplay)
         params.set("autoplay", "1");
-      }
-      if (meta.loop) {
+      if (meta.loop)
         params.set("loop", "1");
-      }
-      if (meta.start) {
+      if (meta.start)
         params.set("start", meta.start.toString());
-      }
-      if (meta.end) {
+      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}" />`;
+      const { width, height, ratio, title } = meta;
+      return `<VideoYoutube${stringifyAttrs({ src: source, width, height, ratio, title })} />`;
     }
   });
 };
@@ -3520,16 +3472,17 @@ var annotationPlugin = (md) => {
 };
 
 // src/node/inline/icons.ts
-var iconsPlugin = (md, options = {}) => md.inline.ruler.before("emphasis", "iconify", createTokenizer(options));
-function createTokenizer(options) {
+import { colors as colors4 } from "vuepress/utils";
+function createIconRule([l1, l2, r1, r2], deprecated) {
   return (state, silent) => {
     let found = false;
     const max = state.posMax;
     const start = state.pos;
-    if (state.src.charCodeAt(start) !== 58 || state.src.charCodeAt(start + 1) !== 91) {
+    if (state.src.charCodeAt(start) !== l1 || state.src.charCodeAt(start + 1) !== l2) {
       return false;
     }
-    if (state.src.charCodeAt(start + 2) === 32)
+    const next = state.src.charCodeAt(start + 2);
+    if (next === 32 || next === 58)
       return false;
     if (silent)
       return false;
@@ -3537,7 +3490,7 @@ function createTokenizer(options) {
       return false;
     state.pos = start + 2;
     while (state.pos < max) {
-      if (state.src.charCodeAt(state.pos) === 93 && state.src.charCodeAt(state.pos + 1) === 58) {
+      if (state.src.charCodeAt(state.pos) === r1 && state.src.charCodeAt(state.pos + 1) === r2) {
         found = true;
         break;
       }
@@ -3547,69 +3500,103 @@ function createTokenizer(options) {
       state.pos = start;
       return false;
     }
-    const content = state.src.slice(start + 2, state.pos);
+    const info = state.src.slice(start + 2, state.pos);
     state.posMax = state.pos;
     state.pos = start + 2;
-    const [name, opt = ""] = content.split(" ");
-    const [size, color = options.color] = opt.trim().split("/");
-    const icon = state.push("vp_icon_open", "VPIcon", 1);
-    icon.markup = ":[";
-    icon.attrs = [["name", name]];
-    if (size || options.size)
-      icon.attrs.push(["size", String(size || options.size)]);
-    if (color)
-      icon.attrs.push(["color", color]);
-    const close = state.push("vp_icon_close", "VPIcon", -1);
-    close.markup = "]:";
+    const icon = state.push("icon", "i", 0);
+    icon.markup = "::";
+    icon.content = info;
+    icon.meta = { deprecated };
     state.pos = state.posMax + 2;
     state.posMax = max;
     return true;
   };
 }
+var RE_SIZE = /(?<=\s|^)=(.+?)(?:\s|$)/;
+var RE_COLOR = /(?<=\s|^)\/(.+?)(?:\s|$)/;
+function iconRender(content, options) {
+  let size = options.size;
+  let color = options.color;
+  content = content.replace(RE_SIZE, (_, s) => {
+    size = s;
+    return "";
+  }).replace(RE_COLOR, (_, c) => {
+    color = c;
+    return "";
+  }).trim();
+  const [name, ...extra] = content.split(/\s+/);
+  return `<VPIcon${stringifyAttrs({ name, size, color, class: extra.length ? extra.join(" ") : void 0 })} />`;
+}
+var iconPlugin = (md, options = {}) => {
+  md.inline.ruler.before(
+    "link",
+    "icon",
+    //               :     :      :      :
+    createIconRule([58, 58, 58, 58])
+  );
+  md.inline.ruler.before(
+    "link",
+    "icon_deprecated",
+    //               :     [      ]      :
+    createIconRule([58, 91, 93, 58], true)
+  );
+  md.renderer.rules.icon = (tokens, idx, _, env) => {
+    const { content, meta } = tokens[idx];
+    let icon = content;
+    if (meta.deprecated) {
+      const [name, opt = ""] = content.split(" ");
+      const [size, color] = opt.trim().split("/");
+      icon = `${name}${size ? ` =${size}` : ""}${color ? ` /${color}` : ""}`;
+      console.warn(`The icon syntax of \`${colors4.yellow(`:[${content}]:`)}\` is deprecated, please use \`${colors4.green(`::${icon}::`)}\` instead. (${colors4.gray(env.filePathRelative || env.filePath)})`);
+    }
+    return iconRender(icon, options);
+  };
+};
 
 // src/node/inline/plot.ts
-var plotPlugin = (md) => md.inline.ruler.before("emphasis", "plot", createTokenizer2());
-function createTokenizer2() {
-  return (state, silent) => {
-    let found = false;
-    const max = state.posMax;
-    const start = state.pos;
-    if (state.src.charCodeAt(start) !== 33 || state.src.charCodeAt(start + 1) !== 33) {
-      return false;
-    }
-    const next = state.src.charCodeAt(start + 2);
-    if (next === 32 || next === 33)
-      return false;
-    if (silent)
-      return false;
-    if (max - start < 5)
-      return false;
-    state.pos = start + 2;
-    while (state.pos < max) {
-      if (state.src.charCodeAt(state.pos) === 33 && state.src.charCodeAt(state.pos + 1) === 33) {
-        found = true;
-        break;
-      }
-      state.md.inline.skipToken(state);
-    }
-    if (!found || start + 2 === state.pos || state.src.charCodeAt(state.pos - 1) === 32) {
-      state.pos = start;
-      return false;
+var plotDef = (state, silent) => {
+  let found = false;
+  const max = state.posMax;
+  const start = state.pos;
+  if (state.src.charCodeAt(start) !== 33 || state.src.charCodeAt(start + 1) !== 33) {
+    return false;
+  }
+  const next = state.src.charCodeAt(start + 2);
+  if (next === 32 || next === 33)
+    return false;
+  if (silent)
+    return false;
+  if (max - start < 5)
+    return false;
+  state.pos = start + 2;
+  while (state.pos < max) {
+    if (state.src.charCodeAt(state.pos) === 33 && state.src.charCodeAt(state.pos + 1) === 33) {
+      found = true;
+      break;
     }
-    const content = state.src.slice(start + 2, state.pos);
-    state.posMax = state.pos;
-    state.pos = start + 2;
-    const open = state.push("plot_open", "Plot", 1);
-    open.markup = "!!";
-    const text = state.push("text", "", 0);
-    text.content = content;
-    const close = state.push("plot_close", "Plot", -1);
-    close.markup = "!!";
-    state.pos = state.posMax + 2;
-    state.posMax = max;
-    return true;
+    state.md.inline.skipToken(state);
+  }
+  if (!found || start + 2 === state.pos || state.src.charCodeAt(state.pos - 1) === 32) {
+    state.pos = start;
+    return false;
+  }
+  const content = state.src.slice(start + 2, state.pos);
+  state.posMax = state.pos;
+  state.pos = start + 2;
+  const token = state.push("plot_inline", "Plot", 0);
+  token.markup = "!!";
+  token.content = content;
+  state.pos = state.posMax + 2;
+  state.posMax = max;
+  return true;
+};
+var plotPlugin = (md) => {
+  md.renderer.rules.plot_inline = (tokens, idx) => {
+    const token = tokens[idx];
+    return `<Plot>${token.content}</Plot>`;
   };
-}
+  md.inline.ruler.before("emphasis", "plot", plotDef);
+};
 
 // src/node/inline/index.ts
 function inlineSyntaxPlugin(md, options) {
@@ -3626,7 +3613,7 @@ function inlineSyntaxPlugin(md, options) {
     md.use(abbrPlugin);
   }
   if (options.icons) {
-    md.use(iconsPlugin, isPlainObject3(options.icons) ? options.icons : {});
+    md.use(iconPlugin, isPlainObject3(options.icons) ? options.icons : {});
   }
   if (options.plot === true || isPlainObject3(options.plot) && options.plot.tag !== false) {
     md.use(plotPlugin);
@@ -3689,8 +3676,8 @@ async function prepareConfigFile(app, options) {
     enhances.add(`app.component('CanIUseViewer', CanIUse)`);
   }
   if (options.fileTree) {
-    imports.add(`import FileTreeItem from '${CLIENT_FOLDER}components/FileTreeItem.vue'`);
-    enhances.add(`app.component('FileTreeItem', FileTreeItem)`);
+    imports.add(`import FileTreeNode from '${CLIENT_FOLDER}components/FileTreeNode.vue'`);
+    enhances.add(`app.component('FileTreeNode', FileTreeNode)`);
   }
   if (options.artPlayer) {
     imports.add(`import ArtPlayer from '${CLIENT_FOLDER}components/ArtPlayer.vue'`);