Markdown实时双栏对比 - 同步滚动差异

Markdown 是一种轻量级标记语言，由 John Gruber 于2004年创建。它使用纯文本格式语法，可以轻松转换为结构化的 HTML 文档。优势包括：易读易写（即使未经渲染也能清晰阅读）、跨平台兼容（纯文本文件任何编辑器都能打开）、版本控制友好（Git 等工具天然支持 diff 对比）、广泛支持（GitHub、Notion、Obsidian 等主流平台均原生支持）。它是技术写作、文档编写和笔记记录的理想选择。

本工具采用百分比映射算法实现同步滚动。当用户在编辑器（或预览区）滚动时，系统计算当前滚动位置占该区域总可滚动高度的百分比，然后将相同的百分比应用到另一侧区域。这种方法能有效应对源码区和预览区高度不一致的情况（渲染后的 HTML 通常比源码文本占据更多垂直空间）。为防止循环触发，使用了互斥锁机制，确保一次滚动操作只触发一次同步。在移动端（屏幕宽度 < 768px），双栏变为上下堆叠布局，同步滚动自动适配。

基于 marked.js 渲染引擎，本工具完整支持 GFM（GitHub Flavored Markdown） 规范，包括：
✅ 表格（Tables）
✅ 任务列表（Task Lists，如 - [ ] 和 - [x]）
✅ 删除线（Strikethrough，~~text~~）
✅ 自动链接识别
✅ 代码块语法高亮（使用 highlight.js，支持180+种编程语言）
✅ 智能换行处理
✅ Emoji 简码（如 :smile:）
同时还支持标准 Markdown 的所有基础语法：标题、列表、引用、链接、图片、加粗、斜体、分隔线等。

点击工具栏上的「导出HTML」按钮，系统会生成一个包含完整样式（含代码高亮主题）的独立 HTML 文件并自动触发浏览器下载。该文件可以直接在任何浏览器中打开查看，无需依赖任何外部资源。导出的 HTML 保留了所有渲染效果，适合分享给他人或存档。也可以使用「复制HTML」按钮将 HTML 片段复制到剪贴板，粘贴到博客、CMS 或其他支持 HTML 的平台中。

Markdown 的应用场景非常广泛：
📝 技术文档：API 文档、README 文件、项目 Wiki
📖 博客写作：大多数静态站点生成器（Hexo、Hugo、Jekyll）均使用 Markdown
📋 笔记记录：Obsidian、Notion、Typora 等笔记工具的核心格式
💬 论坛与社区：GitHub Issues、Stack Overflow、Reddit 均支持 Markdown
📧 邮件模板：部分邮件客户端支持 Markdown 撰写
📊 演示文稿：Marp、Slidev 等工具可将 Markdown 转换为 PPT
学习 Markdown 只需几分钟，却能极大提升文本排版效率。

不会。本工具完全在您的浏览器本地运行。所有 Markdown 解析、渲染、代码高亮均通过客户端 JavaScript 完成，没有任何内容被上传到服务器。编辑内容会自动保存到浏览器的 localStorage（本地存储）中，刷新页面或关闭浏览器后重新打开，之前的内容会自动恢复。您完全可以放心处理敏感或私密文档。如需清除本地存储的数据，点击「清空」按钮即可。