fix: 修复代码高亮和容器语法的两个关键问题
- 代码高亮排除 mermaid 代码块，避免干扰渲染 - 容器语法正确处理空行，不再截断内容 - 添加测试页面验证修复效果
This commit is contained in:
276
tests/test-mermaid-fixes.html
Normal file
276
tests/test-mermaid-fixes.html
Normal file
@@ -0,0 +1,276 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user