mio-previewer 0.1.3 → 0.1.5

package/README.zh-CN.md

@@ -2,205 +2,484 @@
 
 [English](./README.md) | 中文文档
 
-一个针对流式更新优化的小型 Vue 3 Markd## 流式行为与光标管理
+一个针对流式更新优化的 Vue 3 Markdown 渲染器，具有强大的插件系统。支持实时渲染、语法高亮、数学公式、图表等功能。
 
-`isStreaming` prop 控制是否在渲染内容末尾显示闪烁的光标：
+✨ **核心特性：**
+- 🚀 支持流式实时渲染
+- 🎨 内置语法高亮（Prism.js，20+ 种语言）
+- 📐 数学公式支持（KaTeX）
+- 📊 图表渲染（Mermaid）
+- 🔌 可扩展的插件系统
+- 📦 支持 Tree-shaking，轻量级
+- 🎯 TypeScript 支持
 
-- `isStreaming=false` — 不显示光标。用于静态内容或流式更新已结束的情况。
-- `isStreaming=true` — 在末尾显示闪烁光标，表示内容正在流式更新中。
+## 安装
 
-当 `isStreaming` 为 `true` 时，会在 AST 末尾插入一个特殊节点 `{ type: 'component', name: 'cursor' }` 来渲染 `BlinkingCursor` 组件。辅助函数 `manageCursor(ast, 'add'|'remove')` 负责插入与移除该光标节点。渲染流程为：Markdown -> HTML -> htmlparser2 AST，然后将 AST 渲染为 Vue VNode。项目提供可选的模块 Worker（`public/parser.worker.js`）以将 Markdown 解析卸载到主线程之外。
-
-本项目已配置为可发布的 npm 库（见 `package.json` 的脚本）。库从包根导出命名导出 `MdRenderer`（可通过 `import { MdRenderer } from 'mio-previewer'` 使用）。
+```bash
+npm install mio-previewer
+# 或
+pnpm add mio-previewer
+# 或
+yarn add mio-previewer
+```
 
 ## 快速开始
 
-先决条件：建议使用 Node 18+，以及 pnpm（或 npm/yarn）。
+### 基础用法
 
-安装依赖：
+```vue
+<template>
+  <MdRenderer :md="markdown" />
+</template>
 
-```bash
-pnpm install
+<script setup>
+import { ref } from 'vue'
+import { MdRenderer } from 'mio-previewer'
+import 'mio-previewer/dist/mio-previewer.css'
+
+const markdown = ref('# Hello World\n\n这是 **Markdown** 渲染!')
+</script>
 ```
 
-本项目已配置为可发布的 npm 库（见 `package.json` 的脚本）。库从包根导出命名导出 `MdRenderer`（可通过 `import { MdRenderer } from 'mio-previewer'` 使用）。
+### 流式模式
 
-启动开发服务器：
+适用于 AI 聊天机器人或实时内容展示：
 
-```bash
-pnpm dev
+```vue
+<template>
+  <MdRenderer 
+    :md="streamContent" 
+    :isStreaming="isStreaming" 
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { MdRenderer } from 'mio-previewer'
+import 'mio-previewer/dist/mio-previewer.css'
+
+const streamContent = ref('')
+const isStreaming = ref(true)
+
+// 模拟流式输出
+const text = '# 流式演示\n\n内容**逐步**出现...'
+let index = 0
+
+const interval = setInterval(() => {
+  if (index < text.length) {
+    streamContent.value += text[index++]
+  } else {
+    isStreaming.value = false
+    clearInterval(interval)
+  }
+}, 50)
+</script>
 ```
 
-在浏览器打开 http://localhost:5173/ 以查看实时预览。
+## 插件系统
 
-生产构建：
+### 使用内置插件
 
-```bash
-pnpm build
-pnpm preview
+#### 数学公式（KaTeX）
+
+```vue
+<script setup>
+import { MdRenderer } from 'mio-previewer'
+import { katexPlugin } from 'mio-previewer/plugins/markdown-it'
+import 'mio-previewer/dist/mio-previewer.css'
+
+const markdown = \`
+# 数学示例
+
+行内公式：$E = mc^2$
+
+块级公式：
+$$
+\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
+$$
+\`
+
+const markdownItPlugins = [
+  { plugin: katexPlugin }
+]
+</script>
+
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :markdownItPlugins="markdownItPlugins" 
+  />
+</template>
 ```
 
-安装库（发布后或本地安装）：
+#### 警告框
 
-```bash
-# 从 npm 安装（发布后）
-pnpm add mio-previewer
+```vue
+<script setup>
+import { MdRenderer } from 'mio-previewer'
+import { AlertPlugin } from 'mio-previewer/plugins/markdown-it'
+import 'mio-previewer/dist/mio-previewer.css'
 
-# 或从本地目录安装
-pnpm add /path/to/mio-previewer
+const markdown = \`
+::: info
+这是一个支持 **Markdown** 的 **info** 警告框！
+:::
+
+::: warning
+⚠️ 警告信息
+:::
+
+::: error
+❌ 错误信息
+:::
+
+::: success
+✅ 成功信息
+:::
+\`
+
+const markdownItPlugins = [
+  { plugin: AlertPlugin }
+]
+</script>
+
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :markdownItPlugins="markdownItPlugins" 
+  />
+</template>
 ```
 
-使用示例（在 Vue 3 项目中）：
+#### 代码高亮
 
-```js
-import { createApp } from 'vue'
+```vue
+<script setup>
 import { MdRenderer } from 'mio-previewer'
-import 'github-markdown-css/github-markdown.css'
+import { CodeBlockPlugin } from 'mio-previewer/plugins/custom'
+import 'mio-previewer/dist/mio-previewer.css'
 
-const app = createApp({})
-app.component('MdRenderer', MdRenderer)
-app.mount('#app')
+const markdown = \`
+\\\`\\\`\\\`javascript
+function hello() {
+  console.log('Hello World!')
+}
+\\\`\\\`\\\`
+
+\\\`\\\`\\\`python
+def greet():
+    print("你好，世界！")
+\\\`\\\`\\\`
+\`
+
+const customPlugins = [CodeBlockPlugin]
+</script>
+
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :customPlugins="customPlugins" 
+  />
+</template>
 ```
 
-注意事项
-- 库打包时将 `vue` 标记为 external。发布时建议在你的 `package.json` 中加入 `peerDependencies: { "vue": "^3" }`，或在宿主项目中安装兼容的 Vue。
-- 类型声明会输出到 `dist/types`，顶级 `types` 字段已指向生成的声明文件。
+#### Mermaid 图表
 
-发布清单
-- 确保 `package.json` 中包含 `name`、`version`、`description`、`repository` 等字段，并建议添加 `peerDependencies: { "vue": "^3" }`。
-- 运行 `pnpm run build`（会生成 bundle 和类型声明）。
-- 使用 `pnpm publish --access public` 发布，或在 CI 中自动化发布流程。
+```vue
+<script setup>
+import { MdRenderer } from 'mio-previewer'
+import { mermaidPlugin } from 'mio-previewer/plugins/custom'
+import 'mio-previewer/dist/mio-previewer.css'
+
+const markdown = \`
+\\\`\\\`\\\`mermaid
+graph TD
+    A[开始] --> B{判断}
+    B -->|是| C[继续]
+    B -->|否| D[停止]
+\\\`\\\`\\\`
+\`
+
+const customPlugins = [mermaidPlugin]
+</script>
+
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :customPlugins="customPlugins" 
+  />
+</template>
+```
 
-## 项目概览
+#### Emoji 表情
 
-- `src/MdRenderer.vue` — 核心组件。接收 `md`（字符串）、`isStreaming`（布尔）和 `useWorker`（布尔）三个 prop。负责解析、流式增量更新，以及在流式模式下管理特殊的光标组件节点。
-- `src/components/RecursiveRenderer.vue` — 将 htmlparser2 的 AST 递归渲染为 Vue VNode。支持 `plugins` 数组（每个 plugin 为 `{ test, render }`）。
-- `src/components/BlinkingCursor.vue` — 流式渲染时显示的光标组件。
-- `public/parser.worker.js` —（可选）模块 Worker。当 `useWorker` 为 true 时，`MdRenderer` 会向 Worker 发送 `{ markdownText }` 并期望收到 `{ ast }`，其中 `ast` 的结构应与 `parseDocument(html).children` 一致。
+```vue
+<script setup>
+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 customPlugins = [EmojiPlugin]
+</script>
 
-- 非流式（`isStreaming=false`）：每次更新都会对 Markdown 进行全量解析。
-- 流式（`isStreaming=true`）：对更新按增量块处理。`MdRenderer` 对简单纯文本块会尝试“追加到最后文本节点”的快速路径优化；若发现新块包含 Markdown 语法（例如 `#`, `` ` ``, `*` 等），则退回到重解析整串的安全路径。
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :customPlugins="customPlugins" 
+  />
+</template>
+```
 
-在流式模式下，代码会在 AST 末尾插入一个特殊节点 `{ type: 'component', name: 'cursor' }`，用于渲染 `BlinkingCursor`。辅助函数 `manageCursor(ast, 'add'|'remove')` 负责插入与移除该节点。
+### 完整示例（使用所有插件）
 
-## 插件系统
+```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'
 
-mio-previewer 提供强大的双层插件系统：
+const markdown = ref(\`# 完整演示 :rocket:
 
-### 1. Markdown-it 插件（语法扩展）
+## 警告框
+::: info
+这是**重要**信息！
+:::
 
-通过标准 markdown-it 插件扩展 Markdown 语法：
+## 数学公式
+行内：$E = mc^2$
 
-```js
-import { MdRenderer } from 'mio-previewer'
-import markdownItSub from 'markdown-it-sub'
-import markdownItSup from 'markdown-it-sup'
+块级：$$\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}$$
 
-const markdownItPlugins = [
-  { plugin: markdownItSub },
-  { plugin: markdownItSup, options: { /* 插件选项 */ } }
-]
+## 代码
+\\\`\\\`\\\`javascript
+console.log('你好，世界！')
+\\\`\\\`\\\`
 
-// 在组件中使用
-<MdRenderer 
-  :md="text"
-  :markdownItPlugins="markdownItPlugins"
-  :markdownItOptions="{ html: true, linkify: true }"
-/>
-```
+## 图表
+\\\`\\\`\\\`mermaid
+graph LR
+    A --> B --> C
+\\\`\\\`\\\`
 
-### 2. 自定义插件（渲染扩展）
+做得好！ :thumbsup: :100:
+\`)
 
-为特定 AST 节点创建自定义渲染器：
+const customPlugins = [
+  mermaidPlugin,
+  CodeBlockPlugin,
+  EmojiPlugin
+]
+
+const markdownItPlugins = [
+  { plugin: AlertPlugin },
+  { plugin: katexPlugin }
+]
+</script>
+
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :customPlugins="customPlugins"
+    :markdownItPlugins="markdownItPlugins"
+  />
+</template>
+```
 
-```js
-import { AlertPlugin, EmojiPlugin } from 'mio-previewer'
+### 创建自定义插件
 
-// 内置插件
-const customPlugins = [AlertPlugin, EmojiPlugin]
+#### 自定义渲染插件
 
-// 或创建自己的插件
-const MyPlugin = {
-  name: 'my-plugin',
-  priority: 50,  // 更高优先级先执行
-  test: (node) => node.type === 'tag' && node.name === 'custom',
+```javascript
+const HighlightPlugin = {
+  name: 'highlight',
+  priority: 50,
+  test: (node) => {
+    return node.type === 'tag' && 
+           node.name === 'mark'
+  },
   render: (node, renderChildren, h) => {
-    return h('div', { class: 'my-custom' }, renderChildren())
+    return h('mark', {
+      style: {
+        backgroundColor: '#ffeb3b',
+        padding: '2px 4px',
+        borderRadius: '2px'
+      }
+    }, renderChildren())
   }
 }
 
-<MdRenderer :md="text" :customPlugins="[MyPlugin, ...customPlugins]" />
+// 使用插件
+const customPlugins = [HighlightPlugin]
 ```
 
-### 内置插件
+#### 自定义 Markdown-it 插件
+
+```javascript
+function customContainerPlugin(md) {
+  md.use(require('markdown-it-container'), 'note', {
+    render: (tokens, idx) => {
+      if (tokens[idx].nesting === 1) {
+        return '<div class="note">\n'
+      } else {
+        return '</div>\n'
+      }
+    }
+  })
+}
 
-- **AlertPlugin**：渲染自定义警告框，支持类型（info、warning、error、success）
-- **EmojiPlugin**：将表情代码如 `:smile:` 转换为 😊
-- **CodeBlockPlugin**：使用 Prism 语法高亮，支持复制和 HTML 预览按钮（20+ 种语言）
-- **katexPlugin**：使用 KaTeX 渲染数学公式（支持 `$...$`、`$$...$$`、`\(...\)`、`\[...\]` 定界符）
-- **mermaidPlugin**：使用 Mermaid 渲染图表（流程图、时序图、状态图、类图等），支持深色/浅色主题
+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 配置选项 |
+
+### 插件类型
+
+#### CustomPlugin
+
+```typescript
+interface CustomPlugin {
+  name?: string
+  priority?: number  // 数字越大优先级越高
+  test: (node: ASTNode) => boolean
+  render: (
+    node: ASTNode,
+    renderChildren: () => VNode[],
+    h: typeof import('vue').h
+  ) => VNode | string | null
+}
+```
 
-插件按优先级顺序执行（优先级高的先执行）。内置 CursorPlugin 优先级为 100。
+#### MarkdownItPluginConfig
 
-**推荐范围：**
-- 100+：系统插件
-- 50-99：高优先级（容器、警告框）
-- 10-49：中优先级（图标、徽章）
-- 0-9：低优先级（文本处理、表情）
+```typescript
+interface MarkdownItPluginConfig {
+  plugin: (md: MarkdownIt, options?: any) => void
+  options?: any
+}
+```
 
-### 文档
+## 内置插件
 
-详细文档、示例和最佳实践请参见 [插件指南](./docs/PLUGIN_GUIDE.md)。
+### Markdown-it 插件（语法）
 
-### 演示
+| 插件 | 导入路径 | 说明 |
+|------|----------|------|
+| \`AlertPlugin\` | \`mio-previewer/plugins/markdown-it\` | 警告框（info、warning、error、success）|
+| \`katexPlugin\` | \`mio-previewer/plugins/markdown-it\` | KaTeX 数学公式 |
 
-运行插件演示：
-```bash
-pnpm dev
-# 打开 http://localhost:5173/plugin-demo.html
-```
+### 自定义插件（渲染）
 
-## Worker 合约
+| 插件 | 导入路径 | 说明 |
+|------|----------|------|
+| \`mermaidPlugin\` | \`mio-previewer/plugins/custom\` | Mermaid 图表渲染 |
+| \`CodeBlockPlugin\` | \`mio-previewer/plugins/custom\` | Prism 语法高亮 |
+| \`EmojiPlugin\` | \`mio-previewer/plugins/custom\` | Emoji 代码替换 |
 
-当 `useWorker` 为 `true` 时，`MdRenderer` 会创建一个模块 Worker：
+## 高级用法
 
-```js
-worker = new Worker(new URL('/parser.worker.js', import.meta.url), { type: 'module' })
-worker.postMessage({ markdownText: newMd })
-// worker 应返回: postMessage({ ast })
+### Markdown-it 配置
+
+```vue
+<script setup>
+const markdownItOptions = {
+  html: true,        // 启用 HTML 标签
+  linkify: true,     // 自动转换 URL
+  typographer: true, // 智能引号、破折号
+  breaks: false      // 将 \n 转换为 <br>
+}
+</script>
+
+<template>
+  <MdRenderer 
+    :md="markdown" 
+    :markdownItOptions="markdownItOptions" 
+  />
+</template>
 ```
 
-返回的 `ast` 必须与 `parseDocument(html).children` 的结构保持一致，`RecursiveRenderer` 将直接消费该 AST。
+### Web Worker 模式
 
-## TypeScript 迁移说明
+处理大文档时获得更好的性能：
 
-项目已逐步迁移为 TypeScript 风格。为降低迁移风险，仓库中添加了临时的 `src/types-shims.d.ts` 用于最小化类型声明噪声。建议的下一步：
+```vue
+<template>
+  <MdRenderer 
+    :md="largeMarkdown" 
+    :useWorker="true" 
+  />
+</template>
+```
+
+**注意：** Worker 模式需要 \`public/parser.worker.js\` 文件可访问。
+
+## 开发
 
 ```bash
-pnpm add -D vue-tsc @types/htmlparser2 @types/markdown-it
-npx vue-tsc --noEmit
-```
+# 安装依赖
+pnpm install
 
-安装真实类型后，可删除临时 shim 并进行更严格的类型检查。
+# 启动开发服务器
+pnpm dev
 
-## 开发建议
+# 构建库
+pnpm build
 
-- 如需调试 AST 输出，可在 `MdRenderer.vue` 中分配 `ast` 前打印 `parseDocument(html).children`，方便为插件设计节点匹配器。
-- 在更改流式逻辑时，注意调用 `manageCursor` 以在增量更新期间保持光标显示一致性。
+# 运行基准测试
+pnpm benchmark
+```
 
-## 关注文件
+## 项目结构
 
-- `src/MdRenderer.vue` — 解析与流式逻辑
-- `src/components/RecursiveRenderer.vue` — 渲染器与插件系统
-- `src/components/BlinkingCursor.vue` — 用于流式的光标
-- `public/parser.worker.js` — 可选的 worker 解析契约
+```
+mio-previewer/
+├── src/
+│   ├── MdRenderer.vue           # 主渲染器组件
+│   ├── components/
+│   │   ├── RecursiveRenderer.vue # AST 到 VNode 渲染器
+│   │   ├── BlinkingCursor.vue   # 流式光标
+│   │   └── CodeBlock.vue        # 代码高亮
+│   ├── plugins/
+│   │   ├── AlertPlugin.ts       # 警告框
+│   │   ├── katexPlugin.ts       # 数学公式
+│   │   ├── mermaidPlugin.ts     # 图表
+│   │   ├── CodeBlockPlugin.ts   # 语法高亮
+│   │   └── EmojiPlugin.ts       # Emoji 支持
+│   └── index.ts                 # 库入口
+├── public/
+│   └── parser.worker.js         # 可选 Web Worker
+└── docs/                        # 文档
+```
 
-## License
+## 浏览器支持
+
+- Chrome/Edge：最新 2 个版本
+- Firefox：最新 2 个版本
+- Safari：最新 2 个版本
+
+## 许可证
 
 MIT
+
+## 相关链接
+
+- [GitHub 仓库](https://github.com/Pretend-to/mio-previewer)
+- [npm 包](https://www.npmjs.com/package/mio-previewer)
+- [插件指南](./docs/PLUGIN_GUIDE.md)
+- [更新日志](./CHANGELOG.md)

package/dist/AlertPlugin-B74_-nlo.cjs

@@ -0,0 +1,3 @@
+"use strict";function $(a,i,l){function t(r){return r.trim().split(" ",2)[0]===i}function d(r,c,_,b,e){return r[c].nesting===1&&r[c].attrJoin("class",i),e.renderToken(r,c,_,b,e)}l=l||{};const p=3,u=l.marker||":",h=u.charCodeAt(0),f=u.length,A=l.validate||t,m=l.render||d;function C(r,c,_,b){let e,g=!1,n=r.bMarks[c]+r.tShift[c],s=r.eMarks[c];if(h!==r.src.charCodeAt(n))return!1;for(e=n+1;e<=s&&u[(e-n)%f]===r.src[e];e++);const x=Math.floor((e-n)/f);if(x<p)return!1;e-=(e-n)%f;const M=r.src.slice(n,e),v=r.src.slice(e,s);if(!A(v,M))return!1;if(b)return!0;let o=c;for(;o++,!(o>=_||(n=r.bMarks[o]+r.tShift[o],s=r.eMarks[o],n<s&&r.sCount[o]<r.blkIndent));)if(h===r.src.charCodeAt(n)&&!(r.sCount[o]-r.blkIndent>=4)){for(e=n+1;e<=s&&u[(e-n)%f]===r.src[e];e++);if(!(Math.floor((e-n)/f)<x)&&(e-=(e-n)%f,e=r.skipSpaces(e),!(e<s))){g=!0;break}}const T=r.parentType,S=r.lineMax;r.parentType="container",r.lineMax=o;const k=r.push("container_"+i+"_open","div",1);k.markup=M,k.block=!0,k.info=v,k.map=[c,o],r.md.block.tokenize(r,c+1,o);const y=r.push("container_"+i+"_close","div",-1);return y.markup=r.src.slice(n,e),y.block=!0,r.parentType=T,r.lineMax=S,r.line=o+(g?1:0),!0}a.block.ruler.before("fence","container_"+i,C,{alt:["paragraph","reference","blockquote","list"]}),a.renderer.rules["container_"+i+"_open"]=m,a.renderer.rules["container_"+i+"_close"]=m}function w(a){const i=["info","warning","error","success"],l={info:"#0ea5e9",warning:"#f59e0b",error:"#ef4444",success:"#10b981"};i.forEach(t=>{a.use($,t,{render:(d,p)=>{const u=l[t];return d[p].nesting===1?`<div class="custom-alert alert-${t}" style="padding: 12px 16px; border-left: 4px solid ${u}; background-color: ${u}15; margin: 8px 0; border-radius: 4px; font-family: system-ui, -apple-system, sans-serif;">
+`:`</div>
+`}})})}exports.AlertPlugin=w;

package/dist/AlertPlugin-DUG0ldg_.js

@@ -0,0 +1,66 @@
+function $(s, i, l) {
+  function t(r) {
+    return r.trim().split(" ", 2)[0] === i;
+  }
+  function p(r, c, _, b, e) {
+    return r[c].nesting === 1 && r[c].attrJoin("class", i), e.renderToken(r, c, _, b, e);
+  }
+  l = l || {};
+  const d = 3, u = l.marker || ":", h = u.charCodeAt(0), f = u.length, A = l.validate || t, m = l.render || p;
+  function C(r, c, _, b) {
+    let e, g = !1, n = r.bMarks[c] + r.tShift[c], a = r.eMarks[c];
+    if (h !== r.src.charCodeAt(n))
+      return !1;
+    for (e = n + 1; e <= a && u[(e - n) % f] === r.src[e]; e++)
+      ;
+    const x = Math.floor((e - n) / f);
+    if (x < d)
+      return !1;
+    e -= (e - n) % f;
+    const M = r.src.slice(n, e), v = r.src.slice(e, a);
+    if (!A(v, M))
+      return !1;
+    if (b)
+      return !0;
+    let o = c;
+    for (; o++, !(o >= _ || (n = r.bMarks[o] + r.tShift[o], a = r.eMarks[o], n < a && r.sCount[o] < r.blkIndent)); )
+      if (h === r.src.charCodeAt(n) && !(r.sCount[o] - r.blkIndent >= 4)) {
+        for (e = n + 1; e <= a && u[(e - n) % f] === r.src[e]; e++)
+          ;
+        if (!(Math.floor((e - n) / f) < x) && (e -= (e - n) % f, e = r.skipSpaces(e), !(e < a))) {
+          g = !0;
+          break;
+        }
+      }
+    const T = r.parentType, S = r.lineMax;
+    r.parentType = "container", r.lineMax = o;
+    const k = r.push("container_" + i + "_open", "div", 1);
+    k.markup = M, k.block = !0, k.info = v, k.map = [c, o], r.md.block.tokenize(r, c + 1, o);
+    const y = r.push("container_" + i + "_close", "div", -1);
+    return y.markup = r.src.slice(n, e), y.block = !0, r.parentType = T, r.lineMax = S, r.line = o + (g ? 1 : 0), !0;
+  }
+  s.block.ruler.before("fence", "container_" + i, C, {
+    alt: ["paragraph", "reference", "blockquote", "list"]
+  }), s.renderer.rules["container_" + i + "_open"] = m, s.renderer.rules["container_" + i + "_close"] = m;
+}
+function w(s) {
+  const i = ["info", "warning", "error", "success"], l = {
+    info: "#0ea5e9",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    success: "#10b981"
+  };
+  i.forEach((t) => {
+    s.use($, t, {
+      render: (p, d) => {
+        const u = l[t];
+        return p[d].nesting === 1 ? `<div class="custom-alert alert-${t}" style="padding: 12px 16px; border-left: 4px solid ${u}; background-color: ${u}15; margin: 8px 0; border-radius: 4px; font-family: system-ui, -apple-system, sans-serif;">
+` : `</div>
+`;
+      }
+    });
+  });
+}
+export {
+  w as A
+};