nanhaoluo
29bfd284e0
- 添加 convertMermaidCodeblocks() 函数，在代码高亮前拦截 mermaid 代码块 - 支持标准 Markdown 代码块 (\\\mermaid) 渲染 - 更新 detectMermaidBlocks() 添加 mermaid-from-codeblock 选择器 - 更新 extractMermaidCode() 支持新容器类型 - 创建测试文件 test-codeblock-magic.html - 更新用户文档、开发者文档和 FAQ - 完全绕过代码高亮和 WordPress 格式化 - 支持 PJAX 页面切换 - 特殊字符和换行符正确保留
215 lines
6.5 KiB
HTML
215 lines
6.5 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>WP-Markdown 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;
|
|
}
|
|
.mermaid {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
pre {
|
|
background: #f4f4f4;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>WP-Markdown Mermaid 格式测试</h1>
|
|
<p>本页面测试 WP-Markdown 插件生成的各种 Mermaid 代码块格式</p>
|
|
|
|
<!-- 测试用例 1: 标准 document.write 格式（单行） -->
|
|
<div class="test-case">
|
|
<h2>测试 1: 标准 document.write 格式（单行）</h2>
|
|
<div class="mermaid">
|
|
<script>document.write("flowchart TD\nA[开始] --> B[处理]\nB --> C[结束]")</script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 测试用例 2: document.write 格式（多行，带转义） -->
|
|
<div class="test-case">
|
|
<h2>测试 2: document.write 格式（多行，带转义）</h2>
|
|
<div class="mermaid">
|
|
<script>document.write("graph LR\n A[\"用户输入\"] --> B[\"数据验证\"]\n B --> C{\"是否有效?\"}\n C -->|是| D[\"保存数据\"]\n C -->|否| E[\"显示错误\"]")</script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 测试用例 3: document.write 格式（包含 HTML 实体） -->
|
|
<div class="test-case">
|
|
<h2>测试 3: document.write 格式（包含 HTML 实体）</h2>
|
|
<div class="mermaid">
|
|
<script>document.write("sequenceDiagram\n Alice->>Bob: Hello Bob!\n Bob-->>Alice: Hi Alice!")</script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 测试用例 4: 纯文本格式（无 script 标签） -->
|
|
<div class="test-case">
|
|
<h2>测试 4: 纯文本格式（无 script 标签）</h2>
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
Start --> Stop
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 测试用例 5: pre code 格式 -->
|
|
<div class="test-case">
|
|
<h2>测试 5: pre code 格式</h2>
|
|
<pre><code class="language-mermaid">graph TD
|
|
A --> B
|
|
B --> C</code></pre>
|
|
</div>
|
|
|
|
<!-- 测试用例 6: 复杂图表（类图） -->
|
|
<div class="test-case">
|
|
<h2>测试 6: 复杂图表（类图）</h2>
|
|
<div class="mermaid">
|
|
<script>document.write("classDiagram\n class Animal {\n +String name\n +int age\n +makeSound()\n }\n class Dog {\n +String breed\n +bark()\n }\n Animal <|-- Dog")</script>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
<script>
|
|
// 模拟 Argon 主题的 Mermaid 初始化逻辑
|
|
console.log('[测试] 开始初始化 Mermaid');
|
|
|
|
// 检测所有 Mermaid 代码块
|
|
function detectMermaidBlocks() {
|
|
const blocks = [];
|
|
const selectors = [
|
|
'div.mermaid',
|
|
'pre code.language-mermaid',
|
|
'pre[data-lang="mermaid"]',
|
|
'code.mermaid'
|
|
];
|
|
|
|
selectors.forEach(selector => {
|
|
const elements = document.querySelectorAll(selector);
|
|
elements.forEach(element => {
|
|
if (!blocks.includes(element)) {
|
|
blocks.push(element);
|
|
}
|
|
});
|
|
});
|
|
|
|
console.log(`[测试] 检测到 ${blocks.length} 个 Mermaid 代码块`);
|
|
return blocks;
|
|
}
|
|
|
|
// 提取代码块内容（使用改进后的正则）
|
|
function extractMermaidCode(element) {
|
|
let code = '';
|
|
|
|
if (element.tagName === 'DIV' && element.classList.contains('mermaid')) {
|
|
const scriptTag = element.querySelector('script');
|
|
if (scriptTag) {
|
|
const scriptContent = scriptTag.textContent || scriptTag.innerText;
|
|
console.log('[测试] 原始 script 内容:', scriptContent.substring(0, 100));
|
|
|
|
// 使用改进后的正则：[\s\S]*? 匹配包括换行在内的所有字符
|
|
let match = scriptContent.match(/document\.write\s*\(\s*["']([\s\S]*?)["']\s*\)/);
|
|
|
|
if (match && match[1]) {
|
|
code = match[1];
|
|
console.log('[测试] 从 document.write() 提取到代码，长度:', code.length);
|
|
} else {
|
|
// 降级方案：直接提取引号内容
|
|
match = scriptContent.match(/["']([\s\S]*?)["']/);
|
|
if (match && match[1]) {
|
|
code = match[1];
|
|
console.log('[测试] 从引号内提取到代码，长度:', code.length);
|
|
} else {
|
|
const clonedElement = element.cloneNode(true);
|
|
const scripts = clonedElement.querySelectorAll('script');
|
|
scripts.forEach(script => script.remove());
|
|
code = clonedElement.textContent;
|
|
console.log('[测试] 使用降级方案提取代码');
|
|
}
|
|
}
|
|
} else {
|
|
code = element.textContent;
|
|
console.log('[测试] 从纯文本提取代码');
|
|
}
|
|
} else if (element.tagName === 'CODE') {
|
|
code = element.textContent;
|
|
} else if (element.tagName === 'PRE') {
|
|
const codeElement = element.querySelector('code');
|
|
code = codeElement ? codeElement.textContent : element.textContent;
|
|
}
|
|
|
|
// 解码 HTML 实体
|
|
code = code
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, "'");
|
|
|
|
// 解码转义字符
|
|
code = code
|
|
.replace(/\\n/g, '\n')
|
|
.replace(/\\t/g, '\t')
|
|
.replace(/\\r/g, '\r')
|
|
.replace(/\\"/g, '"')
|
|
.replace(/\\'/g, "'")
|
|
.replace(/\\\\/g, '\\');
|
|
|
|
console.log('[测试] 最终提取的代码:', code.substring(0, 100) + (code.length > 100 ? '...' : ''));
|
|
return code.trim();
|
|
}
|
|
|
|
// 初始化并渲染
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'default',
|
|
securityLevel: 'loose'
|
|
});
|
|
|
|
const blocks = detectMermaidBlocks();
|
|
blocks.forEach((block, index) => {
|
|
const code = extractMermaidCode(block);
|
|
const chartId = `mermaid-chart-${index}`;
|
|
|
|
console.log(`[测试] 渲染图表 ${index}:`, code);
|
|
|
|
mermaid.render(chartId, code).then(result => {
|
|
const container = document.createElement('div');
|
|
container.innerHTML = result.svg;
|
|
block.parentNode.replaceChild(container, block);
|
|
console.log(`[测试] 图表 ${index} 渲染成功`);
|
|
}).catch(error => {
|
|
console.error(`[测试] 图表 ${index} 渲染失败:`, error);
|
|
block.style.border = '2px solid red';
|
|
block.innerHTML = `<strong style="color: red;">渲染失败: ${error.message}</strong><br><pre>${code}</pre>`;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|