nanhaoluo
29bfd284e0
- 添加 convertMermaidCodeblocks() 函数，在代码高亮前拦截 mermaid 代码块 - 支持标准 Markdown 代码块 (\\\mermaid) 渲染 - 更新 detectMermaidBlocks() 添加 mermaid-from-codeblock 选择器 - 更新 extractMermaidCode() 支持新容器类型 - 创建测试文件 test-codeblock-magic.html - 更新用户文档、开发者文档和 FAQ - 完全绕过代码高亮和 WordPress 格式化 - 支持 PJAX 页面切换 - 特殊字符和换行符正确保留
1.7 KiB
1.7 KiB
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 行