mio-previewer 0.2.71 → 0.2.73

package/README.md

@@ -1,17 +1,13 @@
 # mio-previewer
 
-[中文文档](./README.zh-CN.md) | English
+A Vue 3 markdown rendering engine engineered for **AI streaming responses**. It transforms standard Markdown output into reactive Vue VNodes, enabling smooth, incremental DOM updates without the performance penalties of `v-html`.
 
-A Vue 3 markdown renderer optimized for streaming updates with powerful plugin system. Features real-time rendering, syntax highlighting, math formulas, diagrams, and more.
+✨ **Core Value Proposition:**
 
-✨ **Key Features:**
-- 🚀 Streaming-friendly real-time rendering
-- 🎨 Built-in syntax highlighting (Prism.js, 20+ languages)
-- 📐 Math formulas support (KaTeX)
-- 📊 Diagram rendering (Mermaid)
-- 🔌 Extensible plugin system
-- 📦 Tree-shakeable & lightweight
-- 🎯 TypeScript support
+- ⚡️ **VNode-Based Incremental Rendering**: Bypasses the "destroy & recreate" cycle of `v-html`. By converting AST to VNodes, we leverage Vue's diffing algorithm to update only the changed text nodes during streaming.
+- 🧩 **Component-Level Interception**: Intercepts Markdown tokens (like code blocks or math) and renders them as fully interactive Vue components, not just static HTML.
+- 🌊 **Stream-Optimized**: Features like smart cursor tracking and anti-jitter logic ensure a buttery-smooth reading experience while the AI is "typing".
+- 🛡 **Security First**: AST-based transformation naturally prevents XSS attacks compared to raw HTML injection.
 
 ## Installation
 
@@ -33,11 +29,11 @@ yarn add mio-previewer
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { MdRenderer } from 'mio-previewer'
-import 'mio-previewer/dist/mio-previewer.css'
+import { ref } from "vue";
+import { MdRenderer } from "mio-previewer";
+import "mio-previewer/dist/mio-previewer.css";
 
-const markdown = ref('# Hello World\n\nThis is **markdown**!')
+const markdown = ref("# Hello World\n\nThis is **markdown**!");
 </script>
 ```
 
@@ -47,32 +43,29 @@ Perfect for AI chatbots or real-time content:
 
 ```vue
 <template>
-  <MdRenderer 
-    :md="streamContent" 
-    :isStreaming="isStreaming" 
-  />
+  <MdRenderer :md="streamContent" :isStreaming="isStreaming" />
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { MdRenderer } from 'mio-previewer'
-import 'mio-previewer/dist/mio-previewer.css'
+import { ref } from "vue";
+import { MdRenderer } from "mio-previewer";
+import "mio-previewer/dist/mio-previewer.css";
 
-const streamContent = ref('')
-const isStreaming = ref(true)
+const streamContent = ref("");
+const isStreaming = ref(true);
 
 // Simulate streaming
-const text = '# Streaming Demo\n\nContent appears **gradually**...'
-let index = 0
+const text = "# Streaming Demo\n\nContent appears **gradually**...";
+let index = 0;
 
 const interval = setInterval(() => {
   if (index < text.length) {
-    streamContent.value += text[index++]
+    streamContent.value += text[index++];
   } else {
-    isStreaming.value = false
-    clearInterval(interval)
+    isStreaming.value = false;
+    clearInterval(interval);
   }
-}, 50)
+}, 50);
 </script>
 ```
 
@@ -84,9 +77,9 @@ const interval = setInterval(() => {
 
 ```vue
 <script setup>
-import { MdRenderer } from 'mio-previewer'
-import { katexPlugin } from 'mio-previewer/plugins/markdown-it'
-import 'mio-previewer/dist/mio-previewer.css'
+import { MdRenderer } from "mio-previewer";
+import { katexPlugin } from "mio-previewer/plugins/markdown-it";
+import "mio-previewer/dist/mio-previewer.css";
 
 const markdown = `
 # Math Example
@@ -97,18 +90,13 @@ Block:
 $$
 \\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
 $$
-`
+`;
 
-const markdownItPlugins = [
-  { plugin: katexPlugin }
-]
+const markdownItPlugins = [{ plugin: katexPlugin }];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :markdownItPlugins="markdownItPlugins" 
-  />
+  <MdRenderer :md="markdown" :markdownItPlugins="markdownItPlugins" />
 </template>
 ```
 
@@ -116,9 +104,9 @@ const markdownItPlugins = [
 
 ```vue
 <script setup>
-import { MdRenderer } from 'mio-previewer'
-import { AlertPlugin } from 'mio-previewer/plugins/markdown-it'
-import 'mio-previewer/dist/mio-previewer.css'
+import { MdRenderer } from "mio-previewer";
+import { AlertPlugin } from "mio-previewer/plugins/markdown-it";
+import "mio-previewer/dist/mio-previewer.css";
 
 const markdown = `
 ::: info
@@ -136,18 +124,13 @@ This is an **info** alert with markdown support!
 ::: success
 ✅ Success message
 :::
-`
+`;
 
-const markdownItPlugins = [
-  { plugin: AlertPlugin }
-]
+const markdownItPlugins = [{ plugin: AlertPlugin }];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :markdownItPlugins="markdownItPlugins" 
-  />
+  <MdRenderer :md="markdown" :markdownItPlugins="markdownItPlugins" />
 </template>
 ```
 
@@ -155,9 +138,9 @@ const markdownItPlugins = [
 
 ```vue
 <script setup>
-import { MdRenderer } from 'mio-previewer'
-import { CodeBlockPlugin } from 'mio-previewer/plugins/custom'
-import 'mio-previewer/dist/mio-previewer.css'
+import { MdRenderer } from "mio-previewer";
+import { CodeBlockPlugin } from "mio-previewer/plugins/custom";
+import "mio-previewer/dist/mio-previewer.css";
 
 const markdown = `
 \`\`\`javascript
@@ -170,16 +153,13 @@ function hello() {
 def greet():
     print("Hello from Python!")
 \`\`\`
-`
+`;
 
-const customPlugins = [CodeBlockPlugin]
+const customPlugins = [CodeBlockPlugin];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :customPlugins="customPlugins" 
-  />
+  <MdRenderer :md="markdown" :customPlugins="customPlugins" />
 </template>
 ```
 
@@ -187,9 +167,9 @@ const customPlugins = [CodeBlockPlugin]
 
 ```vue
 <script setup>
-import { MdRenderer } from 'mio-previewer'
-import { mermaidPlugin } from 'mio-previewer/plugins/custom'
-import 'mio-previewer/dist/mio-previewer.css'
+import { MdRenderer } from "mio-previewer";
+import { mermaidPlugin } from "mio-previewer/plugins/custom";
+import "mio-previewer/dist/mio-previewer.css";
 
 const markdown = `
 \`\`\`mermaid
@@ -198,16 +178,13 @@ graph TD
     B -->|Yes| C[Continue]
     B -->|No| D[Stop]
 \`\`\`
-`
+`;
 
-const customPlugins = [mermaidPlugin]
+const customPlugins = [mermaidPlugin];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :customPlugins="customPlugins" 
-  />
+  <MdRenderer :md="markdown" :customPlugins="customPlugins" />
 </template>
 ```
 
@@ -224,32 +201,28 @@ For other plugin styles (KaTeX, Mermaid, Prism), we intentionally do NOT auto-lo
 
 ```js
 // example (app's main.js)
-import 'katex/dist/katex.min.css'                // if you use the KaTeX plugin
-import 'mermaid/dist/mermaid.min.css'            // if you use the Mermaid plugin
-import 'prismjs/themes/prism.css'                // if you use the CodeBlock/Prism plugin
+import "katex/dist/katex.min.css"; // if you use the KaTeX plugin
+import "mermaid/dist/mermaid.min.css"; // if you use the Mermaid plugin
+import "prismjs/themes/prism.css"; // if you use the CodeBlock/Prism plugin
 ```
 
 This keeps the library flexible and avoids network/CDN reliance in restricted environments.
 
-
 #### Emoji Support
 
 ```vue
 <script setup>
-import { MdRenderer } from 'mio-previewer'
-import { EmojiPlugin } from 'mio-previewer/plugins/custom'
-import 'mio-previewer/dist/mio-previewer.css'
+import { MdRenderer } from "mio-previewer";
+import { EmojiPlugin } from "mio-previewer/plugins/custom";
+import "mio-previewer/dist/mio-previewer.css";
 
-const markdown = 'Hello :smile: Welcome! :tada: :rocket:'
+const markdown = "Hello :smile: Welcome! :tada: :rocket:";
 
-const customPlugins = [EmojiPlugin]
+const customPlugins = [EmojiPlugin];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :customPlugins="customPlugins" 
-  />
+  <MdRenderer :md="markdown" :customPlugins="customPlugins" />
 </template>
 ```
 
@@ -257,11 +230,15 @@ const customPlugins = [EmojiPlugin]
 
 ```vue
 <script setup>
-import { ref } from 'vue'
-import { MdRenderer } from 'mio-previewer'
-import { AlertPlugin, katexPlugin } from 'mio-previewer/plugins/markdown-it'
-import { mermaidPlugin, CodeBlockPlugin, EmojiPlugin } from 'mio-previewer/plugins/custom'
-import 'mio-previewer/dist/mio-previewer.css'
+import { ref } from "vue";
+import { MdRenderer } from "mio-previewer";
+import { AlertPlugin, katexPlugin } from "mio-previewer/plugins/markdown-it";
+import {
+  mermaidPlugin,
+  CodeBlockPlugin,
+  EmojiPlugin,
+} from "mio-previewer/plugins/custom";
+import "mio-previewer/dist/mio-previewer.css";
 
 const markdown = ref(`# Complete Demo :rocket:
 
@@ -287,23 +264,16 @@ graph LR
 \`\`\`
 
 Great work! :thumbsup: :100:
-`)
+`);
 
-const customPlugins = [
-  mermaidPlugin,
-  CodeBlockPlugin,
-  EmojiPlugin
-]
+const customPlugins = [mermaidPlugin, CodeBlockPlugin, EmojiPlugin];
 
-const markdownItPlugins = [
-  { plugin: AlertPlugin },
-  { plugin: katexPlugin }
-]
+const markdownItPlugins = [{ plugin: AlertPlugin }, { plugin: katexPlugin }];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
+  <MdRenderer
+    :md="markdown"
     :customPlugins="customPlugins"
     :markdownItPlugins="markdownItPlugins"
   />
@@ -316,59 +286,60 @@ const markdownItPlugins = [
 
 ```javascript
 const HighlightPlugin = {
-  name: 'highlight',
+  name: "highlight",
   priority: 50,
   test: (node) => {
-    return node.type === 'tag' && 
-           node.name === 'mark'
+    return node.type === "tag" && node.name === "mark";
   },
   render: (node, renderChildren, h) => {
-    return h('mark', {
-      style: {
-        backgroundColor: '#ffeb3b',
-        padding: '2px 4px',
-        borderRadius: '2px'
-      }
-    }, renderChildren())
-  }
-}
+    return h(
+      "mark",
+      {
+        style: {
+          backgroundColor: "#ffeb3b",
+          padding: "2px 4px",
+          borderRadius: "2px",
+        },
+      },
+      renderChildren(),
+    );
+  },
+};
 
 // Use it
-const customPlugins = [HighlightPlugin]
+const customPlugins = [HighlightPlugin];
 ```
 
 #### Custom Markdown-it Plugin
 
 ```javascript
 function customContainerPlugin(md) {
-  md.use(require('markdown-it-container'), 'note', {
+  md.use(require("markdown-it-container"), "note", {
     render: (tokens, idx) => {
       if (tokens[idx].nesting === 1) {
-        return '<div class="note">\n'
+        return '<div class="note">\n';
       } else {
-        return '</div>\n'
+        return "</div>\n";
       }
-    }
-  })
+    },
+  });
 }
 
-const markdownItPlugins = [
-  { plugin: customContainerPlugin }
-]
+const markdownItPlugins = [{ plugin: customContainerPlugin }];
 ```
 
 ## API Reference
 
 ### MdRenderer Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `md` | `string` | `''` | Markdown content to render |
-| `isStreaming` | `boolean` | `false` | Show cursor during streaming |
-| `useWorker` | `boolean` | `false` | Use Web Worker for parsing |
-| `customPlugins` | `CustomPlugin[]` | `[]` | Custom rendering plugins |
-| `markdownItPlugins` | `MarkdownItPluginConfig[]` | `[]` | Markdown-it plugins |
-| `markdownItOptions` | `object` | `{}` | Markdown-it options |
+| Prop                | Type                       | Default | Description                  |
+| ------------------- | -------------------------- | ------- | ---------------------------- |
+| `md`                | `string`                   | `''`    | Markdown content to render   |
+| `isStreaming`       | `boolean`                  | `false` | Show cursor during streaming |
+| `useWorker`         | `boolean`                  | `false` | Use Web Worker for parsing   |
+| `customPlugins`     | `CustomPlugin[]`           | `[]`    | Custom rendering plugins     |
+| `markdownItPlugins` | `MarkdownItPluginConfig[]` | `[]`    | Markdown-it plugins          |
+| `markdownItOptions` | `object`                   | `{}`    | Markdown-it options          |
 
 ### Plugin Types
 
@@ -376,14 +347,14 @@ const markdownItPlugins = [
 
 ```typescript
 interface CustomPlugin {
-  name?: string
-  priority?: number  // Higher = earlier execution
-  test: (node: ASTNode) => boolean
+  name?: string;
+  priority?: number; // Higher = earlier execution
+  test: (node: ASTNode) => boolean;
   render: (
     node: ASTNode,
     renderChildren: () => VNode[],
-    h: typeof import('vue').h
-  ) => VNode | string | null
+    h: typeof import("vue").h,
+  ) => VNode | string | null;
 }
 ```
 
@@ -391,8 +362,8 @@ interface CustomPlugin {
 
 ```typescript
 interface MarkdownItPluginConfig {
-  plugin: (md: MarkdownIt, options?: any) => void
-  options?: any
+  plugin: (md: MarkdownIt, options?: any) => void;
+  options?: any;
 }
 ```
 
@@ -400,18 +371,18 @@ interface MarkdownItPluginConfig {
 
 ### Markdown-it Plugins (Syntax)
 
-| Plugin | Import Path | Description |
-|--------|-------------|-------------|
+| Plugin        | Import Path                         | Description                                 |
+| ------------- | ----------------------------------- | ------------------------------------------- |
 | `AlertPlugin` | `mio-previewer/plugins/markdown-it` | Alert boxes (info, warning, error, success) |
-| `katexPlugin` | `mio-previewer/plugins/markdown-it` | Math formulas with KaTeX |
+| `katexPlugin` | `mio-previewer/plugins/markdown-it` | Math formulas with KaTeX                    |
 
 ### Custom Plugins (Rendering)
 
-| Plugin | Import Path | Description |
-|--------|-------------|-------------|
-| `mermaidPlugin` | `mio-previewer/plugins/custom` | Diagram rendering with Mermaid |
-| `CodeBlockPlugin` | `mio-previewer/plugins/custom` | Syntax highlighting with Prism |
-| `EmojiPlugin` | `mio-previewer/plugins/custom` | Emoji code replacement |
+| Plugin              | Import Path                    | Description                                                                |
+| ------------------- | ------------------------------ | -------------------------------------------------------------------------- |
+| `mermaidPlugin`     | `mio-previewer/plugins/custom` | Diagram rendering with Mermaid                                             |
+| `CodeBlockPlugin`   | `mio-previewer/plugins/custom` | Syntax highlighting with Prism                                             |
+| `EmojiPlugin`       | `mio-previewer/plugins/custom` | Emoji code replacement                                                     |
 | `imageViewerPlugin` | `mio-previewer/plugins/custom` | Image preview with zoom & gestures ([docs](./docs/IMAGE_VIEWER_PLUGIN.md)) |
 
 ## Advanced Usage
@@ -421,18 +392,15 @@ interface MarkdownItPluginConfig {
 ```vue
 <script setup>
 const markdownItOptions = {
-  html: true,        // Enable HTML tags
-  linkify: true,     // Auto-convert URLs
+  html: true, // Enable HTML tags
+  linkify: true, // Auto-convert URLs
   typographer: true, // Smart quotes, dashes
-  breaks: false      // Convert \n to <br>
-}
+  breaks: false, // Convert \n to <br>
+};
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :markdownItOptions="markdownItOptions" 
-  />
+  <MdRenderer :md="markdown" :markdownItOptions="markdownItOptions" />
 </template>
 ```
 
@@ -442,10 +410,7 @@ For better performance with large documents:
 
 ```vue
 <template>
-  <MdRenderer 
-    :md="largeMarkdown" 
-    :useWorker="true" 
-  />
+  <MdRenderer :md="largeMarkdown" :useWorker="true" />
 </template>
 ```
 
@@ -492,7 +457,7 @@ mio-previewer/
 ## Browser Support
 
 - Chrome/Edge: Latest 2 versions
-- Firefox: Latest 2 versions  
+- Firefox: Latest 2 versions
 - Safari: Latest 2 versions
 
 ## Documentation
@@ -500,6 +465,7 @@ mio-previewer/
 📚 **[Complete Documentation →](./docs/README.md)**
 
 ### Quick Links
+
 - [Plugin System Guide](./docs/PLUGINS.md) - Complete plugin system documentation
 - [Customize Code Block Styles](./docs/CUSTOMIZE_CODEBLOCK_STYLE.md) - Code block theming
 - [KaTeX Configuration](./docs/KATEX_DELIMITERS.md) - Math formula setup
@@ -514,4 +480,3 @@ MIT
 - [GitHub Repository](https://github.com/Pretend-to/mio-previewer)
 - [npm Package](https://www.npmjs.com/package/mio-previewer)
 - [Documentation Center](./docs/README.md)
-

package/README.zh-CN.md

@@ -1,17 +1,15 @@
-# mio-previewer
+### mio-previewer
 
 [English](./README.md) | 中文文档
 
-一个针对流式更新优化的 Vue 3 Markdown 渲染器，具有强大的插件系统。支持实时渲染、语法高亮、数学公式、图表等功能。
+一个专门为 **AI 流式对话 (Streaming Responses)** 设计的 Vue 3 Markdown 渲染引擎。它将标准的 Markdown 文本转换为可响应的 Vue VNode 树，利用 Vue 的 Diff 算法实现丝滑的增量 DOM 更新，彻底规避 `v-html` 带来的性能抖动和状态丢失。
 
-✨ **核心特性：**
-- 🚀 支持流式实时渲染
-- 🎨 内置语法高亮（Prism.js，20+ 种语言）
-- 📐 数学公式支持（KaTeX）
-- 📊 图表渲染（Mermaid）
-- 🔌 可扩展的插件系统
-- 📦 支持 Tree-shaking，轻量级
-- 🎯 TypeScript 支持
+✨ **核心价值：**
+
+- ⚡️ **基于 VNode 的增量渲染**：打破了 `v-html` “全量销毁再重建”的魔咒。通过将 AST 映射为 VNode，在流式更新时仅更新末尾变化的文本节点，实现 O(1) 级的局部 DOM 操作。
+- 🧩 **组件化拦截 (Component Interception)**：能够精准拦截 Markdown 标记（如代码块、数学公式、图表），并将其替换为功能完备的交互式 Vue 组件，而非死板的静态 HTML。
+- 🌊 **极致流式体验**：内置智能光标追踪和防抖渲染算法，确保 AI 在逐字吐出内容时，页面视觉稳定、不抖动、不闪烁。
+- 🛡 **内核级安全**：由于采用 AST 转换而非直接字符串注入，天然物理隔离了 XSS 攻击风险。
 
 ## 安装
 
@@ -36,7 +34,7 @@ yarn add mio-previewer
 impor## 浏览器支持
 
 - Chrome/Edge: 最新 2 个版本
-- Firefox: 最新 2 个版本  
+- Firefox: 最新 2 个版本
 - Safari: 最新 2 个版本
 
 ## 文档
@@ -72,32 +70,29 @@ const markdown = ref('# Hello World\n\n这是 **Markdown** 渲染!')
 
 ```vue
 <template>
-  <MdRenderer 
-    :md="streamContent" 
-    :isStreaming="isStreaming" 
-  />
+  <MdRenderer :md="streamContent" :isStreaming="isStreaming" />
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { MdRenderer } from 'mio-previewer'
-import 'mio-previewer/dist/mio-previewer.css'
+import { ref } from "vue";
+import { MdRenderer } from "mio-previewer";
+import "mio-previewer/dist/mio-previewer.css";
 
-const streamContent = ref('')
-const isStreaming = ref(true)
+const streamContent = ref("");
+const isStreaming = ref(true);
 
 // 模拟流式输出
-const text = '# 流式演示\n\n内容**逐步**出现...'
-let index = 0
+const text = "# 流式演示\n\n内容**逐步**出现...";
+let index = 0;
 
 const interval = setInterval(() => {
   if (index < text.length) {
-    streamContent.value += text[index++]
+    streamContent.value += text[index++];
   } else {
-    isStreaming.value = false
-    clearInterval(interval)
+    isStreaming.value = false;
+    clearInterval(interval);
   }
-}, 50)
+}, 50);
 </script>
 ```
 
@@ -130,10 +125,7 @@ const markdownItPlugins = [
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :markdownItPlugins="markdownItPlugins" 
-  />
+  <MdRenderer :md="markdown" :markdownItPlugins="markdownItPlugins" />
 </template>
 ```
 
@@ -169,10 +161,7 @@ const markdownItPlugins = [
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :markdownItPlugins="markdownItPlugins" 
-  />
+  <MdRenderer :md="markdown" :markdownItPlugins="markdownItPlugins" />
 </template>
 ```
 
@@ -201,10 +190,7 @@ const customPlugins = [CodeBlockPlugin]
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :customPlugins="customPlugins" 
-  />
+  <MdRenderer :md="markdown" :customPlugins="customPlugins" />
 </template>
 ```
 
@@ -229,10 +215,7 @@ const customPlugins = [mermaidPlugin]
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :customPlugins="customPlugins" 
-  />
+  <MdRenderer :md="markdown" :customPlugins="customPlugins" />
 </template>
 ```
 
@@ -240,20 +223,17 @@ const customPlugins = [mermaidPlugin]
 
 ```vue
 <script setup>
-import { MdRenderer } from 'mio-previewer'
-import { EmojiPlugin } from 'mio-previewer/plugins/custom'
-import 'mio-previewer/dist/mio-previewer.css'
+import { MdRenderer } from "mio-previewer";
+import { EmojiPlugin } from "mio-previewer/plugins/custom";
+import "mio-previewer/dist/mio-previewer.css";
 
-const markdown = '你好 :smile: 欢迎！ :tada: :rocket:'
+const markdown = "你好 :smile: 欢迎！ :tada: :rocket:";
 
-const customPlugins = [EmojiPlugin]
+const customPlugins = [EmojiPlugin];
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :customPlugins="customPlugins" 
-  />
+  <MdRenderer :md="markdown" :customPlugins="customPlugins" />
 </template>
 ```
 
@@ -306,8 +286,8 @@ const markdownItPlugins = [
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
+  <MdRenderer
+    :md="markdown"
     :customPlugins="customPlugins"
     :markdownItPlugins="markdownItPlugins"
   />
@@ -320,59 +300,60 @@ const markdownItPlugins = [
 
 ```javascript
 const HighlightPlugin = {
-  name: 'highlight',
+  name: "highlight",
   priority: 50,
   test: (node) => {
-    return node.type === 'tag' && 
-           node.name === 'mark'
+    return node.type === "tag" && node.name === "mark";
   },
   render: (node, renderChildren, h) => {
-    return h('mark', {
-      style: {
-        backgroundColor: '#ffeb3b',
-        padding: '2px 4px',
-        borderRadius: '2px'
-      }
-    }, renderChildren())
-  }
-}
+    return h(
+      "mark",
+      {
+        style: {
+          backgroundColor: "#ffeb3b",
+          padding: "2px 4px",
+          borderRadius: "2px",
+        },
+      },
+      renderChildren(),
+    );
+  },
+};
 
 // 使用插件
-const customPlugins = [HighlightPlugin]
+const customPlugins = [HighlightPlugin];
 ```
 
 #### 自定义 Markdown-it 插件
 
 ```javascript
 function customContainerPlugin(md) {
-  md.use(require('markdown-it-container'), 'note', {
+  md.use(require("markdown-it-container"), "note", {
     render: (tokens, idx) => {
       if (tokens[idx].nesting === 1) {
-        return '<div class="note">\n'
+        return '<div class="note">\n';
       } else {
-        return '</div>\n'
+        return "</div>\n";
       }
-    }
-  })
+    },
+  });
 }
 
-const markdownItPlugins = [
-  { plugin: customContainerPlugin }
-]
+const markdownItPlugins = [{ plugin: customContainerPlugin }];
 ```
 
 ## API 参考
 
 ### MdRenderer 属性
 
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| \`md\` | \`string\` | \`''\` | 要渲染的 Markdown 内容 |
-| \`isStreaming\` | \`boolean\` | \`false\` | 流式模式时显示光标 |
-| \`useWorker\` | \`boolean\` | \`false\` | 使用 Web Worker 解析 |
-| \`customPlugins\` | \`CustomPlugin[]\` | \`[]\` | 自定义渲染插件 |
-| \`markdownItPlugins\` | \`MarkdownItPluginConfig[]\` | \`[]\` | Markdown-it 插件 |
-| \`markdownItOptions\` | \`object\` | \`{}\` | Markdown-it 配置选项 |
+| 属性                  | 类型                         | 默认值    | 说明                   |
+| --------------------- | ---------------------------- | --------- | ---------------------- |
+| \`md\`                | \`string\`                   | \`''\`    | 要渲染的 Markdown 内容 |
+| \`isStreaming\`       | \`boolean\`                  | \`false\` | 流式模式时显示光标     |
+| \`useWorker\`         | \`boolean\`                  | \`false\` | 使用 Web Worker 解析   |
+| \`customPlugins\`     | \`CustomPlugin[]\`           | \`[]\`    | 自定义渲染插件         |
+| \`markdownItPlugins\` | \`MarkdownItPluginConfig[]\` | \`[]\`    | Markdown-it 插件       |
+| \`markdownItOptions\` | \`object\`                   | \`{}\`    | Markdown-it 配置选项   |
 
 ### 插件类型
 
@@ -380,14 +361,14 @@ const markdownItPlugins = [
 
 ```typescript
 interface CustomPlugin {
-  name?: string
-  priority?: number  // 数字越大优先级越高
-  test: (node: ASTNode) => boolean
+  name?: string;
+  priority?: number; // 数字越大优先级越高
+  test: (node: ASTNode) => boolean;
   render: (
     node: ASTNode,
     renderChildren: () => VNode[],
-    h: typeof import('vue').h
-  ) => VNode | string | null
+    h: typeof import("vue").h,
+  ) => VNode | string | null;
 }
 ```
 
@@ -395,8 +376,8 @@ interface CustomPlugin {
 
 ```typescript
 interface MarkdownItPluginConfig {
-  plugin: (md: MarkdownIt, options?: any) => void
-  options?: any
+  plugin: (md: MarkdownIt, options?: any) => void;
+  options?: any;
 }
 ```
 
@@ -404,18 +385,18 @@ interface MarkdownItPluginConfig {
 
 ### Markdown-it 插件（语法）
 
-| 插件 | 导入路径 | 说明 |
-|------|----------|------|
-| \`AlertPlugin\` | \`mio-previewer/plugins/markdown-it\` | 警告框（info、warning、error、success）|
-| \`katexPlugin\` | \`mio-previewer/plugins/markdown-it\` | KaTeX 数学公式 |
+| 插件            | 导入路径                              | 说明                                    |
+| --------------- | ------------------------------------- | --------------------------------------- |
+| \`AlertPlugin\` | \`mio-previewer/plugins/markdown-it\` | 警告框（info、warning、error、success） |
+| \`katexPlugin\` | \`mio-previewer/plugins/markdown-it\` | KaTeX 数学公式                          |
 
 ### 自定义插件（渲染）
 
-| 插件 | 导入路径 | 说明 |
-|------|----------|------|
-| \`mermaidPlugin\` | \`mio-previewer/plugins/custom\` | Mermaid 图表渲染 |
-| \`CodeBlockPlugin\` | \`mio-previewer/plugins/custom\` | Prism 语法高亮 |
-| \`EmojiPlugin\` | \`mio-previewer/plugins/custom\` | Emoji 代码替换 |
+| 插件                | 导入路径                         | 说明             |
+| ------------------- | -------------------------------- | ---------------- |
+| \`mermaidPlugin\`   | \`mio-previewer/plugins/custom\` | Mermaid 图表渲染 |
+| \`CodeBlockPlugin\` | \`mio-previewer/plugins/custom\` | Prism 语法高亮   |
+| \`EmojiPlugin\`     | \`mio-previewer/plugins/custom\` | Emoji 代码替换   |
 
 ## 高级用法
 
@@ -424,18 +405,15 @@ interface MarkdownItPluginConfig {
 ```vue
 <script setup>
 const markdownItOptions = {
-  html: true,        // 启用 HTML 标签
-  linkify: true,     // 自动转换 URL
+  html: true, // 启用 HTML 标签
+  linkify: true, // 自动转换 URL
   typographer: true, // 智能引号、破折号
-  breaks: false      // 将 \n 转换为 <br>
-}
+  breaks: false, // 将 \n 转换为 <br>
+};
 </script>
 
 <template>
-  <MdRenderer 
-    :md="markdown" 
-    :markdownItOptions="markdownItOptions" 
-  />
+  <MdRenderer :md="markdown" :markdownItOptions="markdownItOptions" />
 </template>
 ```
 
@@ -445,10 +423,7 @@ const markdownItOptions = {
 
 ```vue
 <template>
-  <MdRenderer 
-    :md="largeMarkdown" 
-    :useWorker="true" 
-  />
+  <MdRenderer :md="largeMarkdown" :useWorker="true" />
 </template>
 ```
 

package/dist/mio-previewer.css

@@ -1,4 +1,4 @@
-code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.code-block-wrapper[data-v-5a9f6db9]{margin:1.5em 0;background:#262733;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px #6e7d8c12;border:1px solid #222229;position:relative}.code-block-tooltip[data-v-5a9f6db9]{position:fixed;transform:translate(-50%,-100%);margin-top:-8px;background:#000000e6;color:#fff;padding:6px 12px;border-radius:4px;font-size:13px;white-space:nowrap;pointer-events:none;z-index:10000;animation:tooltipFadeIn-5a9f6db9 .2s ease;box-shadow:0 2px 8px #0000004d}.code-block-tooltip[data-v-5a9f6db9]:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000000e6}@keyframes tooltipFadeIn-5a9f6db9{0%{opacity:0;transform:translate(-50%,calc(-100% - 5px))}to{opacity:1;transform:translate(-50%,-100%)}}.code-block-header[data-v-5a9f6db9]{display:flex;justify-content:space-between;align-items:center;background:#2d2f3a;padding:.35rem .85rem;border-bottom:1px solid #23242d}.lang-label[data-v-5a9f6db9]{color:#a3b0d0;font-size:.89em;font-weight:600;letter-spacing:1px;-webkit-user-select:none;user-select:none}.op-btn-group[data-v-5a9f6db9]{display:flex;gap:.4rem}.op-btn-group button[data-v-5a9f6db9]{border:none;outline:none;background:transparent;color:#8fa3c1;cursor:pointer;border-radius:3px;padding:.21em;transition:color .18s,background .22s;line-height:1;display:flex;align-items:center;font-size:1.02rem;opacity:.85}.op-btn-group button[data-v-5a9f6db9]:hover:not(:disabled){background:#ecf6ff1a}.op-btn-group button[data-v-5a9f6db9]:disabled{cursor:not-allowed;opacity:.5}.copy-code-button[data-v-5a9f6db9]{color:#8fa3c1}.publish-html-button[data-v-5a9f6db9]{color:#10b981}.preview-html-button[data-v-5a9f6db9]{color:#3486ff}.close-preview-button[data-v-5a9f6db9]{color:#ff5d5b;background:#fae8e410}.fullscreen-button[data-v-5a9f6db9]{color:#8b5cf6}.exit-fullscreen-button[data-v-5a9f6db9]{color:#f59e0b}pre[data-v-5a9f6db9],code[data-v-5a9f6db9]{background:transparent;border-radius:0;font-family:JetBrains Mono,Fira Code,Consolas,Menlo,Monaco,monospace;font-size:.92em;line-height:1.6;color:#ddd}pre[data-v-5a9f6db9]{margin:0;padding:1rem;overflow-x:auto;background:#1e1e2e}pre[data-v-5a9f6db9]::-webkit-scrollbar{height:8px;background:transparent}pre[data-v-5a9f6db9]::-webkit-scrollbar-thumb{background-color:#8889;border-radius:4px}pre[data-v-5a9f6db9]::-webkit-scrollbar-thumb:hover{background-color:#888888e6}.iframe-wrapper[data-v-5a9f6db9]{width:100%;overflow:hidden;display:block;position:relative;border:1px solid #ddd;background:#fff;transition:height .1s ease-out}.html-preview-iframe[data-v-5a9f6db9]{width:100%;height:100%;border:none;background:#fff;display:block}.code-block-wrapper.fullscreen[data-v-5a9f6db9]{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;margin:0;border-radius:0;display:flex;flex-direction:column}.code-block-wrapper.fullscreen .code-block-header[data-v-5a9f6db9]{flex-shrink:0}.code-block-wrapper.fullscreen pre[data-v-5a9f6db9]{flex:1;overflow:auto;max-height:none}.code-block-wrapper.fullscreen .iframe-wrapper[data-v-5a9f6db9]{flex:1;height:auto!important;border:none}.code-block-wrapper.fullscreen .html-preview-iframe[data-v-5a9f6db9]{height:100%}.code-block-wrapper.code-block-wrapper pre{background-color:#1e1e2e!important;background:#1e1e2e!important}.code-block-wrapper.code-block-wrapper code{background:transparent!important}.code-block-wrapper pre[class*=language-]{background-color:#1e1e2e!important;background:#1e1e2e!important}.code-block-wrapper code[class*=language-]{background:transparent!important;background-color:transparent!important}.code-block-wrapper pre,.code-block-wrapper pre code,.code-block-wrapper pre[class*=language-],.code-block-wrapper code[class*=language-],.markdown-body .code-block-wrapper pre,.markdown-body .code-block-wrapper pre[class*=language-]{background-color:#1e1e2e!important;background:#1e1e2e!important}.mermaid-diagram-wrapper[data-v-d873f163]{margin:1em 0;background:var(--mermaid-bg, #f9f9f9);border-radius:8px;border:1px solid var(--mermaid-border, #e0e0e0);position:relative}.mermaid-controls[data-v-d873f163]{position:absolute;top:8px;right:8px;z-index:10;display:flex;gap:8px;align-items:center;background:#ffffffe6;padding:4px 8px;border-radius:6px;box-shadow:0 2px 8px #0000001a}.control-btn[data-v-d873f163]{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#555;transition:color .2s,background .2s;border-radius:4px}.control-btn[data-v-d873f163]:hover{background:#0000000d;color:#000}.zoom-indicator[data-v-d873f163]{font-size:12px;color:#666;min-width:45px;text-align:center;font-weight:500}.mermaid-diagram[data-v-d873f163]{position:relative;overflow:hidden;padding:1em;cursor:grab;-webkit-user-select:none;user-select:none}.mermaid-diagram.is-dragging[data-v-d873f163]{cursor:grabbing}.mermaid-diagram.is-fullscreen[data-v-d873f163]{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--mermaid-bg, #f9f9f9);margin:0;border-radius:0;display:flex;align-items:center;justify-content:center}.mermaid-diagram-content[data-v-d873f163]{display:flex;justify-content:center;align-items:flex-start;width:100%}.mermaid-diagram.is-fullscreen .mermaid-diagram-content[data-v-d873f163]{align-items:center;height:100%}.mermaid-diagram-content[data-v-d873f163] svg{display:block;height:auto;max-width:100%}.mermaid-error[data-v-d873f163]{color:#c00;background:#fff0f0;padding:1em;border-radius:4px;margin:1em}.mermaid-error pre[data-v-d873f163]{margin:.5em 0 0;font-size:.9em;white-space:pre-wrap}.theme-dark{background:#1e1e1ef2}.theme-dark{color:#bbb}.theme-dark{background:#ffffff1a;color:#fff}.theme-dark{color:#999}@media (prefers-color-scheme: dark){.mermaid-controls[data-v-d873f163],.mermaid-diagram.is-fullscreen[data-v-d873f163]{background:#1e1e1ef2}.control-btn[data-v-d873f163]{color:#bbb}.control-btn[data-v-d873f163]:hover{background:#ffffff1a;color:#fff}.zoom-indicator[data-v-d873f163]{color:#999}}.blinking-cursor[data-v-0d4d5123]{display:inline-block;animation:blink-0d4d5123 1.2s ease-in-out infinite;vertical-align:text-bottom;margin-left:2px}.cursor-square[data-v-0d4d5123]{width:8px;height:1.2em}.cursor-line[data-v-0d4d5123]{width:2px;height:1.2em}.cursor-circle[data-v-0d4d5123]{width:8px;height:8px;border-radius:50%;vertical-align:baseline}@keyframes blink-0d4d5123{0%,to{opacity:1}50%{opacity:.2}}.mio-image-viewer[data-v-ed2e02d9]{display:inline-block;max-width:100%;height:auto}/*!
+code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.code-block-wrapper[data-v-5a9f6db9]{margin:1.5em 0;background:#262733;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px #6e7d8c12;border:1px solid #222229;position:relative}.code-block-tooltip[data-v-5a9f6db9]{position:fixed;transform:translate(-50%,-100%);margin-top:-8px;background:#000000e6;color:#fff;padding:6px 12px;border-radius:4px;font-size:13px;white-space:nowrap;pointer-events:none;z-index:10000;animation:tooltipFadeIn-5a9f6db9 .2s ease;box-shadow:0 2px 8px #0000004d}.code-block-tooltip[data-v-5a9f6db9]:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000000e6}@keyframes tooltipFadeIn-5a9f6db9{0%{opacity:0;transform:translate(-50%,calc(-100% - 5px))}to{opacity:1;transform:translate(-50%,-100%)}}.code-block-header[data-v-5a9f6db9]{display:flex;justify-content:space-between;align-items:center;background:#2d2f3a;padding:.35rem .85rem;border-bottom:1px solid #23242d}.lang-label[data-v-5a9f6db9]{color:#a3b0d0;font-size:.89em;font-weight:600;letter-spacing:1px;-webkit-user-select:none;user-select:none}.op-btn-group[data-v-5a9f6db9]{display:flex;gap:.4rem}.op-btn-group button[data-v-5a9f6db9]{border:none;outline:none;background:transparent;color:#8fa3c1;cursor:pointer;border-radius:3px;padding:.21em;transition:color .18s,background .22s;line-height:1;display:flex;align-items:center;font-size:1.02rem;opacity:.85}.op-btn-group button[data-v-5a9f6db9]:hover:not(:disabled){background:#ecf6ff1a}.op-btn-group button[data-v-5a9f6db9]:disabled{cursor:not-allowed;opacity:.5}.copy-code-button[data-v-5a9f6db9]{color:#8fa3c1}.publish-html-button[data-v-5a9f6db9]{color:#10b981}.preview-html-button[data-v-5a9f6db9]{color:#3486ff}.close-preview-button[data-v-5a9f6db9]{color:#ff5d5b;background:#fae8e410}.fullscreen-button[data-v-5a9f6db9]{color:#8b5cf6}.exit-fullscreen-button[data-v-5a9f6db9]{color:#f59e0b}pre[data-v-5a9f6db9],code[data-v-5a9f6db9]{background:transparent;border-radius:0;font-family:JetBrains Mono,Fira Code,Consolas,Menlo,Monaco,monospace;font-size:.92em;line-height:1.6;color:#ddd}pre[data-v-5a9f6db9]{margin:0;padding:1rem;overflow-x:auto;background:#1e1e2e}pre[data-v-5a9f6db9]::-webkit-scrollbar{height:8px;background:transparent}pre[data-v-5a9f6db9]::-webkit-scrollbar-thumb{background-color:#8889;border-radius:4px}pre[data-v-5a9f6db9]::-webkit-scrollbar-thumb:hover{background-color:#888888e6}.iframe-wrapper[data-v-5a9f6db9]{width:100%;overflow:hidden;display:block;position:relative;border:1px solid #ddd;background:#fff;transition:height .1s ease-out}.html-preview-iframe[data-v-5a9f6db9]{width:100%;height:100%;border:none;background:#fff;display:block}.code-block-wrapper.fullscreen[data-v-5a9f6db9]{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;margin:0;border-radius:0;display:flex;flex-direction:column}.code-block-wrapper.fullscreen .code-block-header[data-v-5a9f6db9]{flex-shrink:0}.code-block-wrapper.fullscreen pre[data-v-5a9f6db9]{flex:1;overflow:auto;max-height:none}.code-block-wrapper.fullscreen .iframe-wrapper[data-v-5a9f6db9]{flex:1;height:auto!important;border:none}.code-block-wrapper.fullscreen .html-preview-iframe[data-v-5a9f6db9]{height:100%}.code-block-wrapper.code-block-wrapper pre{background-color:#1e1e2e!important;background:#1e1e2e!important}.code-block-wrapper.code-block-wrapper code{background:transparent!important}.code-block-wrapper pre[class*=language-]{background-color:#1e1e2e!important;background:#1e1e2e!important}.code-block-wrapper code[class*=language-]{background:transparent!important;background-color:transparent!important}.code-block-wrapper pre,.code-block-wrapper pre code,.code-block-wrapper pre[class*=language-],.code-block-wrapper code[class*=language-],.markdown-body .code-block-wrapper pre,.markdown-body .code-block-wrapper pre[class*=language-]{background-color:#1e1e2e!important;background:#1e1e2e!important}.mermaid-diagram-wrapper[data-v-d873f163]{margin:1em 0;background:var(--mermaid-bg, #f9f9f9);border-radius:8px;border:1px solid var(--mermaid-border, #e0e0e0);position:relative}.mermaid-controls[data-v-d873f163]{position:absolute;top:8px;right:8px;z-index:10;display:flex;gap:8px;align-items:center;background:#ffffffe6;padding:4px 8px;border-radius:6px;box-shadow:0 2px 8px #0000001a}.control-btn[data-v-d873f163]{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#555;transition:color .2s,background .2s;border-radius:4px}.control-btn[data-v-d873f163]:hover{background:#0000000d;color:#000}.zoom-indicator[data-v-d873f163]{font-size:12px;color:#666;min-width:45px;text-align:center;font-weight:500}.mermaid-diagram[data-v-d873f163]{position:relative;overflow:hidden;padding:1em;cursor:grab;-webkit-user-select:none;user-select:none}.mermaid-diagram.is-dragging[data-v-d873f163]{cursor:grabbing}.mermaid-diagram.is-fullscreen[data-v-d873f163]{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--mermaid-bg, #f9f9f9);margin:0;border-radius:0;display:flex;align-items:center;justify-content:center}.mermaid-diagram-content[data-v-d873f163]{display:flex;justify-content:center;align-items:flex-start;width:100%}.mermaid-diagram.is-fullscreen .mermaid-diagram-content[data-v-d873f163]{align-items:center;height:100%}.mermaid-diagram-content[data-v-d873f163] svg{display:block;height:auto;max-width:100%}.mermaid-error[data-v-d873f163]{color:#c00;background:#fff0f0;padding:1em;border-radius:4px;margin:1em}.mermaid-error pre[data-v-d873f163]{margin:.5em 0 0;font-size:.9em;white-space:pre-wrap}.theme-dark{background:#1e1e1ef2}.theme-dark{color:#bbb}.theme-dark{background:#ffffff1a;color:#fff}.theme-dark{color:#999}@media (prefers-color-scheme: dark){.mermaid-controls[data-v-d873f163],.mermaid-diagram.is-fullscreen[data-v-d873f163]{background:#1e1e1ef2}.control-btn[data-v-d873f163]{color:#bbb}.control-btn[data-v-d873f163]:hover{background:#ffffff1a;color:#fff}.zoom-indicator[data-v-d873f163]{color:#999}}.blinking-cursor[data-v-0d4d5123]{display:inline-block;animation:blink-0d4d5123 1.2s ease-in-out infinite;vertical-align:text-bottom;margin-left:2px}.cursor-square[data-v-0d4d5123]{width:8px;height:1.2em}.cursor-line[data-v-0d4d5123]{width:2px;height:1.2em}.cursor-circle[data-v-0d4d5123]{width:8px;height:8px;border-radius:50%;vertical-align:baseline}@keyframes blink-0d4d5123{0%,to{opacity:1}50%{opacity:.2}}.mio-image-viewer[data-v-768757af]{display:inline-block;max-width:100%;height:auto}/*!
  * Viewer.js v1.11.7
  * https://fengyuanchen.github.io/viewerjs
  *

package/dist/plugins/custom.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../viewer-Canph5Zx.cjs"),t=require("vue"),m=["src","alt","title","data-original","data-index"],f=t.defineComponent({__name:"ImageViewer",props:{src:{},alt:{default:""},title:{default:""},index:{default:0},context:{}},setup(i){const l=i,n=t.ref(null),e=t.inject("imageViewerManager",null),o={cursor:"pointer",maxWidth:"100%",height:"auto"},g=t.computed(()=>{const r=l.context?.images||[];if(l.src&&r.length>0){const a=r.findIndex(u=>u.src===l.src);return a!==-1?a:0}return 0});t.onMounted(()=>{e&&n.value&&e.registerImage(n.value)}),t.onUnmounted(()=>{e&&n.value&&e.unregisterImage(n.value)});function s(){e&&e.show(g.value)}return(r,a)=>(t.openBlock(),t.createElementBlock("img",{ref_key:"imgRef",ref:n,src:i.src,alt:i.alt,title:i.title,"data-original":i.src,"data-index":i.index,class:"mio-image-viewer",style:o,onClick:s},null,8,m))}}),x=c._export_sfc(f,[["__scopeId","data-v-ed2e02d9"]]);function h(i){const{priority:l=50,viewerOptions:n={}}=i||{};return{name:"imageViewer",priority:l,test:e=>e.type==="tag"&&e.name==="img",render:(e,o,g,s)=>{const r=s?.images||[];let a=0;if(e.attribs?.src&&r.length>0){const u=r.findIndex(d=>d.src===e.attribs?.src);u!==-1&&(a=u)}return t.h(x,{src:e.attribs?.src||"",alt:e.attribs?.alt||"",title:e.attribs?.title||"",index:a,viewerOptions:n,context:s})}}}exports.codeBlockPlugin=c.codeBlockPlugin;exports.cursorPlugin=c.cursorPlugin;exports.emojiPlugin=c.emojiPlugin;exports.mermaidPlugin=c.mermaidPlugin;exports.imageViewerPlugin=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../viewer-Canph5Zx.cjs"),t=require("vue"),f=["src","alt","title","data-original","data-index","crossorigin"],h=t.defineComponent({__name:"ImageViewer",props:{src:{},alt:{default:""},title:{default:""},index:{default:0},crossOrigin:{type:Boolean,default:!1},context:{}},setup(i){const r=i,a=t.ref(null),n=t.inject("imageViewerManager",null),e={cursor:"pointer",maxWidth:"100%",height:"auto"},g=t.computed(()=>{const s=r.context?.images||[];if(r.src&&s.length>0){const c=s.findIndex(u=>u.src===r.src);return c!==-1?c:0}return 0}),d=t.computed(()=>r.crossOrigin?r.src.startsWith("http")&&!r.src.includes(window.location.host):!1);t.onMounted(()=>{n&&a.value&&n.registerImage(a.value)}),t.onUnmounted(()=>{n&&a.value&&n.unregisterImage(a.value)});function o(){n&&n.show(g.value)}return(s,c)=>(t.openBlock(),t.createElementBlock("img",{ref_key:"imgRef",ref:a,src:i.src,alt:i.alt,title:i.title,"data-original":i.src,"data-index":i.index,class:"mio-image-viewer",crossorigin:d.value?"anonymous":void 0,style:e,onClick:o},null,8,f))}}),x=l._export_sfc(h,[["__scopeId","data-v-768757af"]]);function v(i){const{priority:r=50,viewerOptions:a={},crossOrigin:n=!1}=i||{};return{name:"imageViewer",priority:r,test:e=>e.type==="tag"&&e.name==="img",render:(e,g,d,o)=>{const s=o?.images||[];let c=0;if(e.attribs?.src&&s.length>0){const u=s.findIndex(m=>m.src===e.attribs?.src);u!==-1&&(c=u)}return t.h(x,{src:e.attribs?.src||"",alt:e.attribs?.alt||"",title:e.attribs?.title||"",index:c,viewerOptions:a,crossOrigin:n,context:o})}}}exports.codeBlockPlugin=l.codeBlockPlugin;exports.cursorPlugin=l.cursorPlugin;exports.emojiPlugin=l.emojiPlugin;exports.mermaidPlugin=l.mermaidPlugin;exports.imageViewerPlugin=v;

package/dist/plugins/custom.es.js

@@ -1,81 +1,85 @@
-import { aF as u } from "../viewer-CZUSHxhf.js";
-import { aG as M, aJ as j, aH as R, aI as E } from "../viewer-CZUSHxhf.js";
-import { defineComponent as g, ref as d, inject as f, computed as x, onMounted as h, onUnmounted as I, createElementBlock as v, openBlock as w, h as p } from "vue";
-const k = ["src", "alt", "title", "data-original", "data-index"], b = /* @__PURE__ */ g({
+import { aF as d } from "../viewer-CZUSHxhf.js";
+import { aG as M, aJ as R, aH as j, aI as S } from "../viewer-CZUSHxhf.js";
+import { defineComponent as f, ref as x, inject as h, computed as g, onMounted as v, onUnmounted as w, createElementBlock as p, openBlock as I, h as y } from "vue";
+const k = ["src", "alt", "title", "data-original", "data-index", "crossorigin"], b = /* @__PURE__ */ f({
   __name: "ImageViewer",
   props: {
     src: {},
     alt: { default: "" },
     title: { default: "" },
     index: { default: 0 },
+    crossOrigin: { type: Boolean, default: !1 },
     context: {}
   },
   setup(t) {
-    const n = t, i = d(null), e = f("imageViewerManager", null), l = {
+    const i = t, n = x(null), r = h("imageViewerManager", null), e = {
       cursor: "pointer",
       maxWidth: "100%",
       height: "auto"
-    }, o = x(() => {
-      const a = n.context?.images || [];
-      if (n.src && a.length > 0) {
-        const r = a.findIndex((c) => c.src === n.src);
-        return r !== -1 ? r : 0;
+    }, l = g(() => {
+      const a = i.context?.images || [];
+      if (i.src && a.length > 0) {
+        const s = a.findIndex((c) => c.src === i.src);
+        return s !== -1 ? s : 0;
       }
       return 0;
+    }), u = g(() => i.crossOrigin ? i.src.startsWith("http") && !i.src.includes(window.location.host) : !1);
+    v(() => {
+      r && n.value && r.registerImage(n.value);
+    }), w(() => {
+      r && n.value && r.unregisterImage(n.value);
     });
-    h(() => {
-      e && i.value && e.registerImage(i.value);
-    }), I(() => {
-      e && i.value && e.unregisterImage(i.value);
-    });
-    function s() {
-      e && e.show(o.value);
+    function o() {
+      r && r.show(l.value);
     }
-    return (a, r) => (w(), v("img", {
+    return (a, s) => (I(), p("img", {
       ref_key: "imgRef",
-      ref: i,
+      ref: n,
       src: t.src,
       alt: t.alt,
       title: t.title,
       "data-original": t.src,
       "data-index": t.index,
       class: "mio-image-viewer",
-      style: l,
-      onClick: s
+      crossorigin: u.value ? "anonymous" : void 0,
+      style: e,
+      onClick: o
     }, null, 8, k));
   }
-}), y = /* @__PURE__ */ u(b, [["__scopeId", "data-v-ed2e02d9"]]);
-function _(t) {
+}), C = /* @__PURE__ */ d(b, [["__scopeId", "data-v-768757af"]]);
+function V(t) {
   const {
-    priority: n = 50,
-    viewerOptions: i = {}
+    priority: i = 50,
+    viewerOptions: n = {},
+    crossOrigin: r = !1
   } = t || {};
   return {
     name: "imageViewer",
-    priority: n,
+    priority: i,
     test: (e) => e.type === "tag" && e.name === "img",
-    render: (e, l, o, s) => {
-      const a = s?.images || [];
-      let r = 0;
+    render: (e, l, u, o) => {
+      const a = o?.images || [];
+      let s = 0;
       if (e.attribs?.src && a.length > 0) {
         const c = a.findIndex((m) => m.src === e.attribs?.src);
-        c !== -1 && (r = c);
+        c !== -1 && (s = c);
       }
-      return p(y, {
+      return y(C, {
         src: e.attribs?.src || "",
         alt: e.attribs?.alt || "",
         title: e.attribs?.title || "",
-        index: r,
-        viewerOptions: i,
-        context: s
+        index: s,
+        viewerOptions: n,
+        crossOrigin: r,
+        context: o
       });
     }
   };
 }
 export {
   M as codeBlockPlugin,
-  j as cursorPlugin,
-  R as emojiPlugin,
-  _ as imageViewerPlugin,
-  E as mermaidPlugin
+  R as cursorPlugin,
+  j as emojiPlugin,
+  V as imageViewerPlugin,
+  S as mermaidPlugin
 };

package/dist/types/plugins/custom/imageViewerPlugin.d.ts

@@ -13,6 +13,11 @@ export interface ImageViewerPluginOptions {
      * @see https://github.com/fengyuanchen/viewerjs#options
      */
     viewerOptions?: any;
+    /**
+     * 是否开启跨域支持（默认 false）
+     * 如果开启，外部图片将添加 crossorigin="anonymous" 属性
+     */
+    crossOrigin?: boolean;
 }
 /**
  * imageViewerPlugin - 图片预览插件
@@ -31,6 +36,7 @@ export interface ImageViewerPluginOptions {
  * @param options - 插件配置选项
  * @param options.priority - 优先级（默认 50）
  * @param options.viewerOptions - Viewer.js 配置选项
+ * @param options.crossOrigin - 是否开启跨域支持（默认 false）
  * @returns CustomPlugin
  *
  * @example
@@ -48,7 +54,8 @@ export interface ImageViewerPluginOptions {
  *       title: true,
  *       button: true,
  *       loop: false
- *     }
+ *     },
+ *     crossOrigin: true
  *   }
  * }
  * ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mio-previewer",
-  "version": "0.2.71",
+  "version": "0.2.73",
   "private": false,
   "type": "module",
   "engines": {