# Mermaid 修复测试

# 🧪 Mermaid 修复测试页面

本页面用于测试两个关键修复：

1. 代码高亮排除 mermaid：mermaid 代码块不应被代码高亮处理
2. 容器语法处理空行：容器语法中的空行应被正确保留

## 测试 1: 代码高亮排除 Mermaid

### 测试 1.1: 标准 Markdown 格式（应该被排除）

✅ 预期：不应出现代码高亮窗口，直接渲染为 Mermaid 图表

    flowchart TD
        A[开始] --> B[处理]
        B --> C[结束]

### 测试 1.2: 标准 div.mermaid 格式（应该被排除）

✅ 预期：不应出现代码高亮窗口，直接渲染为 Mermaid 图表

flowchart LR A[用户] --> B{登录?} B -->|是| C[显示首页] B -->|否| D[跳转登录页]

### 测试 1.3: 普通代码块（应该被高亮）

✅ 预期：应该出现代码高亮窗口

    function hello() {
        console.log('Hello World');
    }

## 测试 2: 容器语法空行处理

### 测试 2.1: 包含空行的流程图

✅ 预期：空行应被保留，图表正常渲染

::: mermaid flowchart TD A[开始] B[处理步骤1] C[处理步骤2] D[结束] A --> B B --> C C --> D :::

实际渲染：

::: mermaid flowchart TD A[开始] B[处理步骤1] C[处理步骤2] D[结束] A --> B B --> C C --> D :::

### 测试 2.2: 包含空行的时序图

✅ 预期：空行应被保留，图表正常渲染

::: mermaid sequenceDiagram participant A as Alice participant B as Bob A->>B: Hello Bob! Note over A,B: 这是一个注释 B-->>A: Hi Alice! :::

实际渲染：

::: mermaid sequenceDiagram participant A as Alice participant B as Bob A->>B: Hello Bob! Note over A,B: 这是一个注释 B-->>A: Hi Alice! :::

### 测试 2.3: 包含多个连续空行

✅ 预期：多个空行应被保留，图表正常渲染

::: mermaid flowchart LR A[步骤A] B[步骤B] C[步骤C] A --> B --> C :::

实际渲染：

::: mermaid flowchart LR A[步骤A] B[步骤B] C[步骤C] A --> B --> C :::

## 测试 3: WP-Markdown 格式兼容性

### 测试 3.1: document.write 格式

✅ 预期：正确提取代码并渲染

## 📋 测试检查清单

- 测试 1.1: Markdown 格式的 mermaid 代码块没有代码高亮窗口
- 测试 1.2: div.mermaid 格式没有代码高亮窗口
- 测试 1.3: 普通 JavaScript 代码有代码高亮窗口
- 测试 2.1: 包含空行的流程图正常渲染
- 测试 2.2: 包含空行的时序图正常渲染
- 测试 2.3: 包含多个连续空行的图表正常渲染
- 测试 3.1: WP-Markdown 格式正常渲染