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. **错误处理**:添加更详细的日志,帮助调试边缘情况