docs: 更新 Mermaid 使用指南和添加换行符测试页面
This commit is contained in:
@@ -338,3 +338,4 @@ Argon 主题支持以下格式（按优先级排序）：
|
|||||||
- ✅ 修复容器语法中空行导致内容被截断的问题
|
- ✅ 修复容器语法中空行导致内容被截断的问题
|
||||||
- ✅ 修复 WP-Markdown 的 document.write 重复输出问题
|
- ✅ 修复 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