277 lines
6.2 KiB
HTML
277 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mermaid 修复测试</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
.test-section {
|
||
background: white;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.test-section h2 {
|
||
color: #5e72e4;
|
||
border-bottom: 2px solid #5e72e4;
|
||
padding-bottom: 10px;
|
||
}
|
||
.test-case {
|
||
margin: 15px 0;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-left: 4px solid #5e72e4;
|
||
}
|
||
.test-case h3 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
.expected {
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
}
|
||
.code-block {
|
||
background: #2d2d2d;
|
||
color: #d4d4d4;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
overflow-x: auto;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 14px;
|
||
}
|
||
.mermaid {
|
||
background: white;
|
||
padding: 20px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
margin: 10px 0;
|
||
}
|
||
pre code.language-mermaid {
|
||
display: block;
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border: 2px dashed #5e72e4;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🧪 Mermaid 修复测试页面</h1>
|
||
<p>本页面用于测试两个关键修复：</p>
|
||
<ol>
|
||
<li><strong>代码高亮排除 mermaid</strong>：mermaid 代码块不应被代码高亮处理</li>
|
||
<li><strong>容器语法处理空行</strong>：容器语法中的空行应被正确保留</li>
|
||
</ol>
|
||
|
||
<!-- 测试 1: 代码高亮排除 -->
|
||
<div class="test-section">
|
||
<h2>测试 1: 代码高亮排除 Mermaid</h2>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 1.1: 标准 Markdown 格式（应该被排除）</h3>
|
||
<p class="expected">✅ 预期：不应出现代码高亮窗口，直接渲染为 Mermaid 图表</p>
|
||
<pre><code class="language-mermaid">
|
||
flowchart TD
|
||
A[开始] --> B[处理]
|
||
B --> C[结束]
|
||
</code></pre>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 1.2: 标准 div.mermaid 格式（应该被排除）</h3>
|
||
<p class="expected">✅ 预期：不应出现代码高亮窗口，直接渲染为 Mermaid 图表</p>
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
A[用户] --> B{登录?}
|
||
B -->|是| C[显示首页]
|
||
B -->|否| D[跳转登录页]
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 1.3: 普通代码块（应该被高亮）</h3>
|
||
<p class="expected">✅ 预期：应该出现代码高亮窗口</p>
|
||
<pre><code class="language-javascript">
|
||
function hello() {
|
||
console.log('Hello World');
|
||
}
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试 2: 容器语法空行处理 -->
|
||
<div class="test-section">
|
||
<h2>测试 2: 容器语法空行处理</h2>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 2.1: 包含空行的流程图</h3>
|
||
<p class="expected">✅ 预期：空行应被保留，图表正常渲染</p>
|
||
<div class="code-block">
|
||
::: mermaid
|
||
flowchart TD
|
||
A[开始]
|
||
|
||
B[处理步骤1]
|
||
|
||
C[处理步骤2]
|
||
|
||
D[结束]
|
||
|
||
A --> B
|
||
B --> C
|
||
C --> D
|
||
:::
|
||
</div>
|
||
<p>实际渲染：</p>
|
||
<p>
|
||
::: mermaid
|
||
flowchart TD
|
||
A[开始]
|
||
|
||
B[处理步骤1]
|
||
|
||
C[处理步骤2]
|
||
|
||
D[结束]
|
||
|
||
A --> B
|
||
B --> C
|
||
C --> D
|
||
:::
|
||
</p>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 2.2: 包含空行的时序图</h3>
|
||
<p class="expected">✅ 预期：空行应被保留，图表正常渲染</p>
|
||
<div class="code-block">
|
||
::: mermaid
|
||
sequenceDiagram
|
||
participant A as Alice
|
||
participant B as Bob
|
||
|
||
A->>B: Hello Bob!
|
||
|
||
Note over A,B: 这是一个注释
|
||
|
||
B-->>A: Hi Alice!
|
||
:::
|
||
</div>
|
||
<p>实际渲染：</p>
|
||
<p>
|
||
::: mermaid
|
||
sequenceDiagram
|
||
participant A as Alice
|
||
participant B as Bob
|
||
|
||
A->>B: Hello Bob!
|
||
|
||
Note over A,B: 这是一个注释
|
||
|
||
B-->>A: Hi Alice!
|
||
:::
|
||
</p>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 2.3: 包含多个连续空行</h3>
|
||
<p class="expected">✅ 预期：多个空行应被保留，图表正常渲染</p>
|
||
<div class="code-block">
|
||
::: mermaid
|
||
flowchart LR
|
||
A[步骤A]
|
||
|
||
|
||
B[步骤B]
|
||
|
||
|
||
C[步骤C]
|
||
|
||
A --> B --> C
|
||
:::
|
||
</div>
|
||
<p>实际渲染：</p>
|
||
<p>
|
||
::: mermaid
|
||
flowchart LR
|
||
A[步骤A]
|
||
|
||
|
||
B[步骤B]
|
||
|
||
|
||
C[步骤C]
|
||
|
||
A --> B --> C
|
||
:::
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试 3: WP-Markdown 格式 -->
|
||
<div class="test-section">
|
||
<h2>测试 3: WP-Markdown 格式兼容性</h2>
|
||
|
||
<div class="test-case">
|
||
<h3>测试 3.1: document.write 格式</h3>
|
||
<p class="expected">✅ 预期：正确提取代码并渲染</p>
|
||
<div class="mermaid">
|
||
<script>document.write("flowchart TD\n A[开始] --> B[结束]")</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试结果说明 -->
|
||
<div class="test-section">
|
||
<h2>📋 测试检查清单</h2>
|
||
<ul>
|
||
<li>
|
||
<input type="checkbox" id="check1">
|
||
<label for="check1">测试 1.1: Markdown 格式的 mermaid 代码块没有代码高亮窗口</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check2">
|
||
<label for="check2">测试 1.2: div.mermaid 格式没有代码高亮窗口</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check3">
|
||
<label for="check3">测试 1.3: 普通 JavaScript 代码有代码高亮窗口</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check4">
|
||
<label for="check4">测试 2.1: 包含空行的流程图正常渲染</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check5">
|
||
<label for="check5">测试 2.2: 包含空行的时序图正常渲染</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check6">
|
||
<label for="check6">测试 2.3: 包含多个连续空行的图表正常渲染</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check7">
|
||
<label for="check7">测试 3.1: WP-Markdown 格式正常渲染</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<script>
|
||
// 简单的日志输出
|
||
console.log('[Mermaid Test] 测试页面已加载');
|
||
console.log('[Mermaid Test] 请检查：');
|
||
console.log('[Mermaid Test] 1. mermaid 代码块是否被代码高亮处理');
|
||
console.log('[Mermaid Test] 2. 容器语法中的空行是否被正确保留');
|
||
console.log('[Mermaid Test] 3. 所有图表是否正常渲染');
|
||
</script>
|
||
</body>
|
||
</html>
|