无需登录 数据私有 本地保存

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

11
0
0
0
Markdown 实时双栏对比
Markdown 源码编辑器
实时预览

在左侧输入 Markdown,这里将实时显示渲染结果

字符:0 行数:0 渲染耗时:0ms 自动保存已启用

常见问题与知识点

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(本地存储)中,刷新页面或关闭浏览器后重新打开,之前的内容会自动恢复。您完全可以放心处理敏感或私密文档。如需清除本地存储的数据,点击「清空」按钮即可。