tests/test-wp-markdown-format.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-&gt;&gt;Bob: Hello Bob!\n    Bob--&gt;&gt;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(/&lt;/g, '<')
				.replace(/&gt;/g, '>')
				.replace(/&amp;/g, '&')
				.replace(/&quot;/g, '"')
				.replace(/&#039;/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>