51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
|
# Mermaid 代码块魔改支持
|
||
|
|
|
||
|
|
## 概述
|
||
|
|
|
||
|
|
本 spec 旨在实现对标准 Markdown 代码块 ` ```mermaid ` 的支持，通过在代码高亮之前拦截并转换代码块，完全绕过 WordPress、WP-Markdown 插件和代码高亮的干扰。
|
||
|
|
|
||
|
|
## 核心思路
|
||
|
|
|
||
|
|
参考主题中数学公式的实现方式：
|
||
|
|
- **数学公式**：使用特殊分隔符（`$...$`），不会被 WordPress 和代码高亮干扰
|
||
|
|
- **Mermaid**：使用代码块（` ```mermaid `），需要在代码高亮前拦截并转换
|
||
|
|
|
||
|
|
## 实现方案
|
||
|
|
|
||
|
|
1. **代码块拦截**：在 `highlightJsRender()` 函数开始处添加预处理
|
||
|
|
2. **格式转换**：将 `<pre><code class="language-mermaid">` 转换为 `<div class="mermaid-from-codeblock">`
|
||
|
|
3. **渲染检测**：在 `detectMermaidBlocks()` 中添加新的选择器
|
||
|
|
4. **代码提取**：在 `extractMermaidCode()` 中支持新的容器类型
|
||
|
|
|
||
|
|
## 优势
|
||
|
|
|
||
|
|
- ✅ 使用标准 Markdown 语法
|
||
|
|
- ✅ 在编辑器中清晰可见
|
||
|
|
- ✅ 不被 WordPress 格式化干扰
|
||
|
|
- ✅ 不被代码高亮干扰
|
||
|
|
- ✅ 支持 PJAX 页面切换
|
||
|
|
- ✅ 兼容现有的 Shortcode 和容器语法
|
||
|
|
|
||
|
|
## 文件结构
|
||
|
|
|
||
|
|
```
|
||
|
|
.kiro/specs/mermaid-codeblock-magic/
|
||
|
|
├── README.md # 本文件
|
||
|
|
├── requirements.md # 详细需求文档
|
||
|
|
├── design.md # 设计文档（待创建）
|
||
|
|
└── tasks.md # 任务列表（待创建）
|
||
|
|
```
|
||
|
|
|
||
|
|
## 下一步
|
||
|
|
|
||
|
|
1. 审核 `requirements.md` 需求文档
|
||
|
|
2. 创建 `design.md` 设计文档
|
||
|
|
3. 创建 `tasks.md` 任务列表
|
||
|
|
4. 开始实现
|
||
|
|
|
||
|
|
## 参考
|
||
|
|
|
||
|
|
- 数学公式实现：`footer.php` 第 36-147 行
|
||
|
|
- 代码高亮实现：`argontheme.js` 第 3942-4000 行
|
||
|
|
- Mermaid 渲染实现：`argontheme.js` 第 4430-4750 行
|