# 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 行