262 lines
7.4 KiB
HTML
262 lines
7.4 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>增强Markdown渲染测试</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-container {
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.markdown-content {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3,
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
margin: 4px 0 2px 0;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.markdown-content h1 { font-size: 16px; }
|
|
.markdown-content h2 { font-size: 15px; }
|
|
.markdown-content h3 { font-size: 14px; }
|
|
.markdown-content h4 { font-size: 13px; }
|
|
.markdown-content h5 { font-size: 12px; }
|
|
.markdown-content h6 { font-size: 11px; }
|
|
|
|
.markdown-content p {
|
|
margin: 2px 0;
|
|
line-height: 1.3;
|
|
color: #666;
|
|
}
|
|
|
|
.markdown-content ul,
|
|
.markdown-content ol {
|
|
margin: 2px 0;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin: 1px 0;
|
|
line-height: 1.3;
|
|
color: #666;
|
|
}
|
|
|
|
.markdown-content strong,
|
|
.markdown-content b {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.markdown-content em,
|
|
.markdown-content i {
|
|
font-style: italic;
|
|
color: #555;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background: #f5f5f5;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 11px;
|
|
color: #d63384;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
margin: 4px 0;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
color: #333;
|
|
font-size: 11px;
|
|
border: none;
|
|
display: block;
|
|
white-space: pre;
|
|
}
|
|
|
|
.markdown-table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 4px 0;
|
|
font-size: 11px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.markdown-table th,
|
|
.markdown-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 4px 6px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.markdown-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.markdown-table tr:nth-child(even) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.markdown-table tr:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 3px solid #ddd;
|
|
margin: 4px 0;
|
|
padding-left: 8px;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>增强Markdown渲染测试</h1>
|
|
|
|
<div class="test-container">
|
|
<h2>测试1: 代码块 + 表格组合</h2>
|
|
<div id="test1" class="markdown-content"></div>
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<h2>测试2: 复杂表格</h2>
|
|
<div id="test2" class="markdown-content"></div>
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<h2>测试3: 你的测试内容</h2>
|
|
<div id="test3" class="markdown-content"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 配置marked
|
|
marked.setOptions({
|
|
breaks: true,
|
|
gfm: true,
|
|
tables: true,
|
|
sanitize: false,
|
|
});
|
|
|
|
// 后处理函数
|
|
function postprocessHTML(html) {
|
|
let processedHTML = html
|
|
.replace(/<table>/g, '<table class="markdown-table">')
|
|
.replace(/<pre><code/g, '<pre class="markdown-code"><code');
|
|
|
|
// 创建临时DOM元素来处理语法高亮
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = processedHTML;
|
|
|
|
// 为代码块添加语法高亮
|
|
const codeBlocks = tempDiv.querySelectorAll('pre code');
|
|
codeBlocks.forEach(block => {
|
|
const language = block.className.match(/language-(\w+)/);
|
|
if (language) {
|
|
try {
|
|
block.innerHTML = Prism.highlight(block.textContent, Prism.languages[language[1]], language[1]);
|
|
} catch (e) {
|
|
console.warn('语法高亮失败:', e);
|
|
}
|
|
}
|
|
});
|
|
|
|
return tempDiv.innerHTML;
|
|
}
|
|
|
|
// 测试1: 代码块 + 表格组合
|
|
const test1Markdown = `\`\`\`js
|
|
console.log('hello, JavaScript')
|
|
\`\`\`
|
|
|
|
| Products | Price |
|
|
|----------|-------|
|
|
| Apple | 4 |
|
|
| Banana | 2 |`;
|
|
|
|
document.getElementById('test1').innerHTML = postprocessHTML(marked.parse(test1Markdown));
|
|
|
|
// 测试2: 复杂表格
|
|
const test2Markdown = `| 评估维度 | 权重 | 评分标准 | 计算公式 |
|
|
|---------|------|---------|---------|
|
|
| 完整性 | 0.3 | 缺失值比例 < 5% | $\\text{完整性} = 1 - \\frac{\\text{缺失值数量}}{\\text{总数据量}}$ |
|
|
| 准确性 | 0.3 | 误差率 < 3% | $\\text{准确性} = 1 - \\frac{\\text{错误记录数}}{\\text{总记录数}}$ |`;
|
|
|
|
document.getElementById('test2').innerHTML = postprocessHTML(marked.parse(test2Markdown));
|
|
|
|
// 测试3: 你的测试内容
|
|
const test3Markdown = `测试标题
|
|
这是一个**粗体**和*斜体*的测试。
|
|
|
|
表格测试
|
|
| 产品 | 价格 | 库存 |
|
|
|------|------|------|
|
|
| 苹果 | 4元 | 100个 |
|
|
| 香蕉 | 2元 | 50个 |
|
|
|
|
代码测试
|
|
\`\`\`javascript
|
|
function hello() {
|
|
console.log('Hello World!');
|
|
}
|
|
\`\`\`
|
|
行内代码：\`const name = 'test'\`
|
|
|
|
列表测试
|
|
- 项目1
|
|
- 项目2
|
|
- 子项目2.1
|
|
- 子项目2.2
|
|
- 项目3
|
|
|
|
链接测试
|
|
[GitHub](https://github.com)
|
|
[Vue.js](https://vuejs.org)`;
|
|
|
|
document.getElementById('test3').innerHTML = postprocessHTML(marked.parse(test3Markdown));
|
|
</script>
|
|
</body>
|
|
</html>
|