nanhaoluo
29bfd284e0
- 添加 convertMermaidCodeblocks() 函数，在代码高亮前拦截 mermaid 代码块 - 支持标准 Markdown 代码块 (\\\mermaid) 渲染 - 更新 detectMermaidBlocks() 添加 mermaid-from-codeblock 选择器 - 更新 extractMermaidCode() 支持新容器类型 - 创建测试文件 test-codeblock-magic.html - 更新用户文档、开发者文档和 FAQ - 完全绕过代码高亮和 WordPress 格式化 - 支持 PJAX 页面切换 - 特殊字符和换行符正确保留
172 lines
4.3 KiB
Plaintext
172 lines
4.3 KiB
Plaintext
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 结构：`<div class="mermaid"><script>document.write("...")</script>flowchart TD ...</div>`
|
||
- 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
|
||
<div class="mermaid">
|
||
<script>document.write("flowchart TD\n A --> B")</script>
|
||
flowchart TD
|
||
A --> B
|
||
</div>
|
||
```
|
||
**预期**：只提取 script 中的内容，忽略后面的重复文本
|
||
|
||
### 场景 2: 容器语法（无空行）
|
||
```
|
||
::: mermaid
|
||
flowchart TD
|
||
A --> B
|
||
:::
|
||
```
|
||
**预期**：正常提取完整代码
|
||
|
||
### 场景 3: 容器语法（有空行）
|
||
```
|
||
::: mermaid
|
||
flowchart TD
|
||
A[开始]
|
||
|
||
B[处理]
|
||
|
||
C[结束]
|
||
|
||
A --> B --> C
|
||
:::
|
||
```
|
||
**预期**：保留所有空行，完整提取代码
|
||
|
||
### 场景 4: 容器语法（被分割成多个元素）
|
||
```html
|
||
<p>::: mermaid</p>
|
||
<p>flowchart TD</p>
|
||
<p> A[开始]</p>
|
||
<p></p>
|
||
<p> B[处理]</p>
|
||
<p>:::</p>
|
||
```
|
||
**预期**：跨元素收集，合并为完整代码
|
||
|
||
## 影响范围
|
||
|
||
- ✅ 修复了两个严重的渲染错误
|
||
- ✅ 不影响其他标记格式
|
||
- ✅ 向后兼容
|
||
- ✅ 提升容器语法的鲁棒性
|
||
|
||
## 相关文件
|
||
|
||
- `argontheme.js` - 核心修复
|
||
- `docs/mermaid-usage-guide.md` - 更新文档
|
||
|
||
## 提交信息
|
||
|
||
```
|
||
fix: 修复容器语法和 WP-Markdown 的两个关键问题
|
||
|
||
- 修复 WP-Markdown document.write 重复输出问题
|
||
- 改进容器语法检测，支持跨多个元素收集内容
|
||
- 解决空行导致内容被分割成多个元素的问题
|
||
```
|
||
|
||
Commit: b6d9f8c
|
||
|
||
## 后续建议
|
||
|
||
1. **测试验证**：在实际文章中测试包含空行的复杂 mermaid 图表
|
||
2. **性能优化**：如果页面有大量元素，可以考虑优化查找算法
|
||
3. **错误处理**：添加更详细的日志，帮助调试边缘情况
|