📝 Markdown预览器📝 Markdown Previewer

支持GFM语法的实时Markdown编辑器，可导出HTML文件Real-time Markdown editor with GFM support, export to HTML

编辑区Editor

预览区Preview

什么是 Markdown 实时预览工具？

Markdown 实时预览工具是一款面向开发者、技术写作者和内容创作者的在线编辑器。它允许你在左侧输入 Markdown 语法，右侧即时渲染出最终的 HTML 效果，实现"所见即所得"的编辑体验。Markdown 由 John Gruber 于 2004 年创建，目标是让人们用易读易写的纯文本格式编写文档，然后转换为有效的 HTML 页面。如今 Markdown 已经成为技术文档、README 文件、博客写作的事实标准，GitHub、GitLab、Notion 等平台都原生支持 Markdown 语法。实时预览工具帮助你在学习 Markdown 语法的同时立即看到渲染效果，大幅提高写作效率。

如何使用 Markdown 实时预览

步骤一：在编辑区输入 Markdown 内容 — 左侧编辑区支持所有标准 Markdown 语法，包括标题（#）、加粗（**）、列表（-）、代码块（```）等，输入时实时响应。
步骤二：查看右侧渲染效果 — 预览区会自动将 Markdown 转换为格式化的 HTML 展示，支持语法高亮、表格渲染、图片显示等，所见即所得。
步骤三：导出或复制结果 — 编辑完成后，可以一键复制渲染后的 HTML 代码，或直接下载为 .md 文件、.html 文件，方便在其他平台使用。

常见使用场景

场景一：编写项目 README 文档

在 GitHub 上创建项目时，README.md 是最重要的文档。使用实时预览工具可以在提交前确认排版效果，确保标题层级、代码块、表格等元素正确渲染，避免提交后发现格式问题需要反复修改。

场景二：技术博客内容创作

使用 Hexo、Hugo、Jekyll 等静态博客框架时，文章内容都以 Markdown 格式编写。实时预览工具帮助作者在发布前检查代码高亮、数学公式、图表等复杂元素是否正确显示。

场景三：学习 Markdown 语法

对于 Markdown 新手，实时预览是最好的学习方式。在左侧输入语法，右侧立即看到效果，可以快速掌握各种标记的含义和使用方法，比查阅文档更高效。

技术原理

Markdown 预览工具的核心是一个 Markdown 解析器，常用的有 marked.js、markdown-it、remark 等 JavaScript 库。解析器将 Markdown 文本按照 CommonMark 规范进行词法分析和语法分析，生成抽象语法树（AST），再转换为 HTML 输出。对于扩展语法（如表格、任务列表、脚注），需要加载对应的插件。实时预览通过监听输入事件（input 或 keyup），配合防抖（debounce）机制来平衡响应速度和性能。

// 基本实现思路
const input = document.querySelector('#editor');
const output = document.querySelector('#preview');
input.addEventListener('input', () => {
  output.innerHTML = marked.parse(input.value);
});