docs: 更新 Mermaid 使用指南和添加换行符测试页面
This commit is contained in:
@@ -338,3 +338,4 @@ Argon 主题支持以下格式（按优先级排序）：
|
||||
- ✅ 修复容器语法中空行导致内容被截断的问题
|
||||
- ✅ 修复 WP-Markdown 的 document.write 重复输出问题
|
||||
- ✅ 改进容器语法检测，支持跨多个元素的内容收集
|
||||
- ✅ 修复换行符丢失问题（将 `<br>` 标签正确转换为换行符）
|
||||
|
||||
186
tests/test-mermaid-newline.html
Normal file
186
tests/test-mermaid-newline.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!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-case {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
h2 {
|
||||
color: #333;
|
||||
border-bottom: 2px solid #007bff;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.success {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
pre {
|
||||
background: #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Mermaid 换行符测试</h1>
|
||||
<p>测试 WP-Markdown 生成的 HTML 中 <br> 标签是否正确转换为换行符</p>
|
||||
|
||||
<!-- 测试用例 1: 模拟 WP-Markdown 生成的 HTML -->
|
||||
<div class="test-case">
|
||||
<h2>测试 1: 模拟 WP-Markdown 格式（带 <br> 标签）</h2>
|
||||
<p>::: mermaid<br>
|
||||
flowchart TD<br>
|
||||
Start([开始]) --> Process[处理]<br>
|
||||
Process --> End([结束])<br>
|
||||
:::</p>
|
||||
<div id="result1"></div>
|
||||
</div>
|
||||
|
||||
<!-- 测试用例 2: 复杂流程图 -->
|
||||
<div class="test-case">
|
||||
<h2>测试 2: 复杂流程图（多行文本）</h2>
|
||||
<p>::: mermaid<br>
|
||||
flowchart TD<br>
|
||||
A[用户提交评论] --> B{启用 AI 检测?}<br>
|
||||
B -->|是| C[AI 检测]<br>
|
||||
B -->|否| D[直接保存]<br>
|
||||
C --> E{检测结果?}<br>
|
||||
E -->|垃圾评论| F[移入回收站]<br>
|
||||
E -->|正常评论| G[保存评论]<br>
|
||||
:::</p>
|
||||
<div id="result2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 测试用例 3: 带样式的流程图 -->
|
||||
<div class="test-case">
|
||||
<h2>测试 3: 带样式定义</h2>
|
||||
<p>::: mermaid<br>
|
||||
flowchart LR<br>
|
||||
A[开始] --> B[处理]<br>
|
||||
B --> C[结束]<br>
|
||||
style A fill:#e1f5e1,stroke:#2e7d32<br>
|
||||
style C fill:#ffe1e1,stroke:#c62828<br>
|
||||
:::</p>
|
||||
<div id="result3"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
// 模拟 Argon 主题的 htmlToText 函数
|
||||
function htmlToText(html) {
|
||||
// 将 <br> 和 <br/> 转换为换行符
|
||||
let text = html.replace(/<br\s*\/?>/gi, '\n');
|
||||
// 移除其他 HTML 标签
|
||||
text = text.replace(/<[^>]+>/g, '');
|
||||
// 解码 HTML 实体
|
||||
text = text
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'");
|
||||
return text;
|
||||
}
|
||||
|
||||
// 提取容器语法内容
|
||||
function extractContainerContent(element) {
|
||||
let html = element.innerHTML;
|
||||
let text = element.textContent.trim();
|
||||
|
||||
console.log('[测试] 原始 HTML:', html);
|
||||
console.log('[测试] 原始文本:', text);
|
||||
|
||||
if (!text.startsWith('::: mermaid')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 使用 htmlToText 转换
|
||||
let content = htmlToText(html);
|
||||
console.log('[测试] 转换后文本:', content);
|
||||
|
||||
// 移除开始和结束标记
|
||||
content = content.replace(/^:::\s*mermaid\s*/i, '').trim();
|
||||
content = content.replace(/:::\s*$/, '').trim();
|
||||
|
||||
console.log('[测试] 最终代码:', content);
|
||||
return content;
|
||||
}
|
||||
|
||||
// 测试函数
|
||||
function testMermaid(testId, resultId) {
|
||||
const element = document.querySelector(`#${testId}`).previousElementSibling;
|
||||
const resultDiv = document.getElementById(resultId);
|
||||
|
||||
try {
|
||||
const code = extractContainerContent(element);
|
||||
|
||||
if (!code) {
|
||||
resultDiv.innerHTML = '<p class="error">❌ 提取失败：未找到代码</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查换行符
|
||||
const lines = code.split('\n');
|
||||
console.log(`[测试 ${testId}] 提取到 ${lines.length} 行代码`);
|
||||
|
||||
// 渲染图表
|
||||
mermaid.render(`mermaid-${testId}`, code).then(result => {
|
||||
resultDiv.innerHTML = `
|
||||
<p class="success">✅ 渲染成功</p>
|
||||
<p>提取到 ${lines.length} 行代码</p>
|
||||
<details>
|
||||
<summary>查看提取的代码</summary>
|
||||
<pre>${code}</pre>
|
||||
</details>
|
||||
${result.svg}
|
||||
`;
|
||||
}).catch(error => {
|
||||
resultDiv.innerHTML = `
|
||||
<p class="error">❌ 渲染失败: ${error.message}</p>
|
||||
<details>
|
||||
<summary>查看提取的代码</summary>
|
||||
<pre>${code}</pre>
|
||||
</details>
|
||||
`;
|
||||
});
|
||||
} catch (error) {
|
||||
resultDiv.innerHTML = `<p class="error">❌ 错误: ${error.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'default',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
|
||||
// 运行测试
|
||||
testMermaid('test1', 'result1');
|
||||
testMermaid('test2', 'result2');
|
||||
testMermaid('test3', 'result3');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user