🧪 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 格式

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

📋 测试检查清单