nanhaoluo
07cd43e2bd
- 验证错误捕获机制完整（同步和异步） - 验证友好错误提示已实现 - 验证原始代码查看功能 - 验证错误类型识别和行号提取 - 验证完整的 CSS 样式（日间/夜间模式） - 创建测试文档和总结文档 - 更新任务状态为已完成 - 满足需求 2.5, 7.1-7.4
Mermaid 代码块魔改支持
概述
本 spec 旨在实现对标准 Markdown 代码块 ```mermaid 的支持，通过在代码高亮之前拦截并转换代码块，完全绕过 WordPress、WP-Markdown 插件和代码高亮的干扰。
核心思路
参考主题中数学公式的实现方式：
- 数学公式：使用特殊分隔符（
$...$），不会被 WordPress 和代码高亮干扰 - Mermaid：使用代码块（
```mermaid），需要在代码高亮前拦截并转换
实现方案
- 代码块拦截：在
highlightJsRender()函数开始处添加预处理 - 格式转换：将
<pre><code class="language-mermaid">转换为<div class="mermaid-from-codeblock"> - 渲染检测：在
detectMermaidBlocks()中添加新的选择器 - 代码提取：在
extractMermaidCode()中支持新的容器类型
优势
- ✅ 使用标准 Markdown 语法
- ✅ 在编辑器中清晰可见
- ✅ 不被 WordPress 格式化干扰
- ✅ 不被代码高亮干扰
- ✅ 支持 PJAX 页面切换
- ✅ 兼容现有的 Shortcode 和容器语法
文件结构
.kiro/specs/mermaid-codeblock-magic/
├── README.md # 本文件
├── requirements.md # 详细需求文档
├── design.md # 设计文档（待创建）
└── tasks.md # 任务列表（待创建）
下一步
- 审核
requirements.md需求文档 - 创建
design.md设计文档 - 创建
tasks.md任务列表 - 开始实现
参考
- 数学公式实现：
footer.php第 36-147 行 - 代码高亮实现：
argontheme.js第 3942-4000 行 - Mermaid 渲染实现：
argontheme.js第 4430-4750 行