<!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>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 marked.js 用于 Markdown 渲染 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
.preview-container {
display: none;
}
.preview-container.active {
display: flex;
}
.markdown-content h1 {
font-size: 2rem;
font-weight: bold;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.markdown-content h2 {
font-size: 1.5rem;
font-weight: bold;
margin-top: 1.25rem;
margin-bottom: 0.75rem;
}
.markdown-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.markdown-content p {
margin-bottom: 1rem;
}
.markdown-content ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.markdown-content ol {
list-style-type: decimal;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.markdown-content blockquote {
border-left: 4px solid #3b82f6;
padding-left: 1rem;
margin: 1rem 0;
font-style: italic;
color: #4b5563;
}
.markdown-content code {
background-color: #f3f4f6;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.875rem;
}
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.markdown-content table th,
.markdown-content table td {
border: 1px solid #e5e7eb;
padding: 0.5rem 0.75rem;
text-align: left;
}
.markdown-content table th {
background-color: #f9fafb;
font-weight: 600;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 头部 -->
<header class="bg-white rounded-2xl shadow-lg p-8 mb-8 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3">Markdown 左右对照查看器</h1>
<p class="text-gray-600 text-lg">粘贴两个AI的回答（Markdown格式），全屏并排对照查看已渲染的文本</p>
</header>
<!-- 输入区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- AI回答 #1 -->
<div class="bg-white rounded-2xl shadow-lg p-6">
<div class="flex items-center mb-4 pb-4 border-b border-gray-100">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<span class="text-blue-600 font-bold">A1</span>
</div>
<h3 class="text-xl font-bold text-gray-800">AI回答 #1</h3>
</div>
<textarea
id="markdown1"
class="w-full h-64 p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-y font-mono"
placeholder="在此粘贴第一个AI的Markdown回答..."
># 人工智能在医疗领域的应用
人工智能(AI)正在彻底改变医疗行业，主要体现在以下几个方面：
## 医学影像分析
- **自动检测**：AI可以快速分析X光、CT和MRI扫描，识别肿瘤、骨折等异常
- **准确率高**：在某些情况下，AI系统的准确率甚至超过经验丰富的放射科医生
## 疾病诊断与预测
- **早期诊断**：通过分析患者数据和症状，AI可以识别早期疾病迹象
- **风险预测**：评估患者患特定疾病的风险，实现预防性医疗
## 主要优势总结
| 优势 | 描述 |
|------|------|
| 效率 | 处理大量数据，快速提供分析结果 |
| 准确性 | 减少人为错误，提高诊断一致性 |
| 可及性 | 使优质医疗资源更广泛普及 |
> **结论**：AI与医疗专业人员的结合将创造更高效、精准和个性化的医疗未来。</textarea>
</div>
<!-- AI回答 #2 -->
<div class="bg-white rounded-2xl shadow-lg p-6">
<div class="flex items-center mb-4 pb-4 border-b border-gray-100">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
<span class="text-green-600 font-bold">A2</span>
</div>
<h3 class="text-xl font-bold text-gray-800">AI回答 #2</h3>
</div>
<textarea
id="markdown2"
class="w-full h-64 p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-y font-mono"
placeholder="在此粘贴第二个AI的Markdown回答..."
># 人工智能对医疗行业的影响
人工智能技术正在医疗领域引发革命性变化，其核心应用包括：
## 影像诊断自动化
- **快速分析**：深度学习算法能在秒级内完成医学影像的初步筛查
- **辅助决策**：为医生提供第二意见，减少漏诊和误诊
## 个性化治疗方案
- **数据驱动**：基于患者基因组、病史和生活方式数据制定个性化治疗计划
- **实时调整**：持续监测患者反应并动态调整治疗方案
## 效益分析
| 层面 | 影响 |
|------|------|
| 患者体验 | 更快的诊断、个性化关怀 |
| 医疗机构 | 运营效率提升、成本优化 |
| 医疗系统 | 资源分配更合理、覆盖面扩大 |
> **展望**：随着技术进步和法规完善，AI将在医疗领域发挥更大作用，但伦理和隐私问题仍需妥善解决。</textarea>
</div>
</div>
<!-- 操作按钮 -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
<button
id="previewBtn"
class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center gap-2"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
</svg>
全屏左右对照预览
</button>
</div>
<!-- 示例内容 -->
<div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
</svg>
示例内容
</h3>
<div class="flex flex-wrap gap-3">
<button
class="example-btn px-4 py-2 bg-gray-100 hover:bg-blue-100 text-gray-800 hover:text-blue-800 rounded-lg transition-colors duration-200 border border-gray-200 hover:border-blue-300"
data-example="tech"
>
技术对比示例
</button>
<button
class="example-btn px-4 py-2 bg-gray-100 hover:bg-green-100 text-gray-800 hover:text-green-800 rounded-lg transition-colors duration-200 border border-gray-200 hover:border-green-300"
data-example="story"
>
故事创作示例
</button>
<button
class="example-btn px-4 py-2 bg-gray-100 hover:bg-red-100 text-gray-800 hover:text-red-800 rounded-lg transition-colors duration-200 border border-gray-200 hover:border-red-300"
data-example="clear"
>
清空内容
</button>
</div>
</div>
<!-- 页脚 -->
<footer class="text-center text-gray-500 text-sm">
<p>© 2023 Markdown左右对照查看器 | 使用 marked.js 渲染 Markdown</p>
<p class="mt-1">提示：点击"全屏左右对照预览"按钮后，可按ESC键或点击右上角按钮退出全屏模式</p>
</footer>
</div>
<!-- 全屏预览区域 -->
<div class="preview-container fixed inset-0 bg-white z-50" id="previewContainer">
<!-- 左侧面板 -->
<div class="w-1/2 h-full overflow-y-auto border-r border-gray-200 p-6">
<div class="sticky top-0 bg-white pb-4 mb-4 border-b border-gray-200">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<span class="text-blue-600 font-bold">A1</span>
</div>
<h2 class="text-2xl font-bold text-gray-800">AI回答 #1</h2>
</div>
</div>
<div class="markdown-content" id="previewContent1"></div>
</div>
<!-- 右侧面板 -->
<div class="w-1/2 h-full overflow-y-auto p-6">
<div class="sticky top-0 bg-white pb-4 mb-4 border-b border-gray-200">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
<span class="text-green-600 font-bold">A2</span>
</div>
<h2 class="text-2xl font-bold text-gray-800">AI回答 #2</h2>
</div>
</div>
<div class="markdown-content" id="previewContent2"></div>
</div>
<!-- 退出全屏按钮 -->
<button
id="exitFullscreen"
class="fixed top-4 right-4 w-12 h-12 bg-red-500 hover:bg-red-600 text-white rounded-full shadow-lg flex items-center justify-center transition-colors duration-200"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<script>
// 获取DOM元素
const markdown1Input = document.getElementById('markdown1');
const markdown2Input = document.getElementById('markdown2');
const previewBtn = document.getElementById('previewBtn');
const previewContainer = document.getElementById('previewContainer');
const previewContent1 = document.getElementById('previewContent1');
const previewContent2 = document.getElementById('previewContent2');
const exitFullscreenBtn = document.getElementById('exitFullscreen');
const exampleButtons = document.querySelectorAll('.example-btn');
// 配置marked
marked.setOptions({
breaks: true,
gfm: true
});
// 示例内容（简化版本，没有代码块）
const examples = {
tech: {
md1: `# React vs Vue：前端框架对比
## 核心概念
- **React**：专注于UI组件，使用JSX语法
- **Vue**：渐进式框架，易于集成到现有项目
## 学习曲线
React的学习曲线相对陡峭，特别是对于新手开发者来说。Vue则更加平缓，上手较快。
## 性能比较
| 指标 | React | Vue |
|------|-------|-----|
| 初始加载 | 稍大 | 较小 |
| 运行时性能 | 优秀 | 优秀 |
| 开发体验 | 灵活但需配置 | 开箱即用 |
> **结论**：两者都是优秀的选择，取决于团队偏好和项目需求。`,
md2: `# 前端框架选择：Angular vs React vs Vue
## 框架特性对比
### Angular
- **类型**：完整MVC框架
- **语言**：TypeScript
- **适用场景**：大型企业应用
### React
- **类型**：UI库
- **语言**：JavaScript/JSX
- **适用场景**：灵活多样的项目
### Vue
- **类型**：渐进式框架
- **语言**：JavaScript/HTML
- **适用场景**：快速原型和中小项目
## 社区生态
React拥有最大的开发者社区和最丰富的第三方库。Vue的社区增长迅速，中文文档完善。Angular在企业市场占有重要地位。
> **建议**：小型项目选Vue，灵活项目选React，大型企业项目选Angular。`
},
story: {
md1: `# 科幻故事：时间旅行者的抉择
## 背景设定
公元2157年，时间旅行已成为受严格监管的技术。主角艾伦是一名时间管理局的特工，负责修复时间线异常。
## 关键情节
- **发现异常**：艾伦在检查22世纪时间线时发现一个微小但不断扩大的异常点
- **历史改变**：异常导致20世纪的一项关键发明提前了15年
- **面临选择**：修复异常可能改变数百万人的命运，包括他自己的存在
## 道德困境
艾伦发现异常源于一位试图拯救亲人的时间旅行者。他面临选择：遵守法律修复异常，还是允许这份善意改变历史？
> **故事核心**：在理性与情感、规则与人性的十字路口，艾伦必须做出最终决定。`,
md2: `# 科幻故事：时间悖论
## 背景设定
22世纪中叶，时间旅行被少数精英掌握。主角莉娜是一名时间考古学家，专门研究过去文明。
## 关键发现
- **时间悖论**：莉娜发现自己的研究成果可能源自未来的信息
- **自我实现预言**：她意识到自己可能是某些历史事件的推动者
- **存在危机**：如果她的存在依赖于时间循环，那么"真实的她"究竟是谁？
## 哲学探索
故事探讨了自由意志与宿命论的关系。当未来可以影响过去，当原因可能晚于结果，人类该如何定义自我和现实？
> **主题**：在时间循环中寻找人性的不变本质，在因果颠倒的世界中坚守自我认知。`
}
};
// 全屏预览功能
previewBtn.addEventListener('click', function() {
// 渲染Markdown
previewContent1.innerHTML = marked.parse(markdown1Input.value);
previewContent2.innerHTML = marked.parse(markdown2Input.value);
// 显示预览容器
previewContainer.classList.add('active');
// 禁止滚动
document.body.style.overflow = 'hidden';
});
// 退出全屏功能
exitFullscreenBtn.addEventListener('click', function() {
previewContainer.classList.remove('active');
document.body.style.overflow = 'auto';
});
// ESC键退出全屏
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && previewContainer.classList.contains('active')) {
previewContainer.classList.remove('active');
document.body.style.overflow = 'auto';
}
});
// 示例按钮功能
exampleButtons.forEach(button => {
button.addEventListener('click', function() {
const exampleType = this.getAttribute('data-example');
if (exampleType === 'clear') {
markdown1Input.value = '';
markdown2Input.value = '';
return;
}
if (examples[exampleType]) {
markdown1Input.value = examples[exampleType].md1;
markdown2Input.value = examples[exampleType].md2;
// 添加简单的动画反馈
this.classList.add('scale-95');
setTimeout(() => {
this.classList.remove('scale-95');
}, 150);
}
});
});
// 为文本区域添加快捷键支持
markdown1Input.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'Enter') {
previewBtn.click();
}
});
markdown2Input.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'Enter') {
previewBtn.click();
}
});
</script>
</body>
</html>
index.html
index.html