fix: 修复容器语法和 WP-Markdown 的两个关键问题 ## 问题描述 根据用户反馈,发现两个严重问题: ### 问题 1: WP-Markdown document.write 重复输出 **错误信息**: ``` No diagram type detected matching given configuration for text: document.write("flowchart TD ...")flowchart TD ... ``` **原因分析**: - WP-Markdown 生成的 HTML 结构:`
flowchart TD ...
` - script 标签后面还有一份重复的代码 - 当前代码只提取了 script 内容,但没有移除 script 标签 - 导致后续的 `element.textContent` 包含了重复内容 ### 问题 2: 容器语法空行导致内容截断 **错误信息**: ``` Parse error on line 1: flowchart TD Sta Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA' ``` **原因分析**: - 使用 `::: mermaid ... :::` 语法时,WP-Markdown 遇到空行会分割内容 - 空行后的内容被识别为新的段落或代码块 - 原有的单元素检测逻辑无法处理跨多个元素的情况 - 导致只提取到第一个元素的内容("flowchart TD Sta") ## 修复方案 ### 修复 1: 移除 script 标签避免重复(argontheme.js:4575-4578) 在 `extractMermaidCode()` 函数中,提取完 script 内容后立即移除标签: ```javascript // 重要:移除 script 标签,避免重复渲染 // WP-Markdown 会在 script 后面再输出一次代码 scriptTag.remove(); ``` **效果**: - ✅ 避免 document.write 内容和后续文本重复 - ✅ 确保只提取一次完整代码 - ✅ 不影响其他格式的提取 ### 修复 2: 跨元素收集容器语法内容(argontheme.js:4468-4570) 完全重写 `detectContainerBlocks()` 和 `extractContainerContent()` 函数: **新的检测逻辑**: 1. 查找所有可能包含 `::: mermaid` 的元素(p, pre, code, div) 2. 找到开始标记后,收集所有后续兄弟元素 3. 直到遇到 `:::` 结束标记 4. 合并所有内容,保留空行 **关键代码**: ```javascript // 收集所有内容直到结束标记 while (currentElement) { processedElements.add(currentElement); let text = currentElement.textContent.trim(); // 检查是否是结束标记 if (text === ':::' || text.endsWith(':::')) { foundEnd = true; break; } // 添加当前元素的内容 if (text) { codeLines.push(text); } else { // 空元素,添加空行 codeLines.push(''); } currentElement = currentElement.nextElementSibling; } // 合并所有行 let code = codeLines.join('\n').trim(); ``` **效果**: - ✅ 支持跨多个元素收集内容 - ✅ 正确处理空行(保留为空字符串) - ✅ 完整提取所有 mermaid 代码 - ✅ 避免内容截断 ## 测试场景 ### 场景 1: WP-Markdown 格式 ```html
flowchart TD A --> B
``` **预期**:只提取 script 中的内容,忽略后面的重复文本 ### 场景 2: 容器语法(无空行) ``` ::: mermaid flowchart TD A --> B ::: ``` **预期**:正常提取完整代码 ### 场景 3: 容器语法(有空行) ``` ::: mermaid flowchart TD A[开始] B[处理] C[结束] A --> B --> C ::: ``` **预期**:保留所有空行,完整提取代码 ### 场景 4: 容器语法(被分割成多个元素) ```html

::: mermaid

flowchart TD

A[开始]

B[处理]

:::

``` **预期**:跨元素收集,合并为完整代码 ## 影响范围 - ✅ 修复了两个严重的渲染错误 - ✅ 不影响其他标记格式 - ✅ 向后兼容 - ✅ 提升容器语法的鲁棒性 ## 相关文件 - `argontheme.js` - 核心修复 - `docs/mermaid-usage-guide.md` - 更新文档 ## 提交信息 ``` fix: 修复容器语法和 WP-Markdown 的两个关键问题 - 修复 WP-Markdown document.write 重复输出问题 - 改进容器语法检测,支持跨多个元素收集内容 - 解决空行导致内容被分割成多个元素的问题 ``` Commit: b6d9f8c ## 后续建议 1. **测试验证**:在实际文章中测试包含空行的复杂 mermaid 图表 2. **性能优化**:如果页面有大量元素,可以考虑优化查找算法 3. **错误处理**:添加更详细的日志,帮助调试边缘情况