# Markdown编辑器教程：双栏实时预览写作，一键导出HTML/PDF（快捷键速查）
> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/markdown-editor-guide
## 工具简介：在线 Markdown 编辑器是什么
Markdown 是一种轻量级标记语言，用几个简单符号就能排出层次分明的文章，深受程序员、博主和笔记爱好者喜爱。工具派的「Markdown编辑器」是一款**免安装、打开浏览器即用**的在线写作工具：
- **双栏实时预览**：左侧写源码，右侧即时渲染，格式效果一目了然
- **所见即所得**：加粗、代码高亮、数学公式、任务清单、表格均可实时预览
- **三种导出格式**：一键导出 HTML 网页、PDF 文档或 Markdown 源文件
- **多设备预览**：支持桌面 / 平板 / 手机微信三种宽度，发文前即可检查手机端排版
无论是写技术博客、整理课堂笔记，还是给公众号排版，都能用它高效完成。
## 认识双栏编辑界面
打开工具后，编辑区域分为左右两栏：
1. **顶部工具栏**：提供标题、加粗、斜体、代码块、表格、流程图等快捷按钮，不熟悉语法也能点按插入；
2. **左侧源码区**：在这里输入 Markdown 内容，支持语法高亮，长时间写作不费眼；
3. **右侧预览区**：输入内容会即时渲染成最终效果，加粗、代码块、行内公式、任务清单等一目了然。
> 小技巧：左右两栏会同步滚动，对照修改很方便。
## 工具栏与常用快捷键
工具栏图标与快捷键一一对应，熟练之后写作效率翻倍：
| 操作 | Markdown 写法 | 快捷键 |
| --- | --- | --- |
| 一级~六级标题 | `#` ~ `######` | Ctrl + 1 ~ 6 |
| 粗体 | `**文字**` | Ctrl + B |
| 斜体 | `*文字*` | Ctrl + I |
| 行内代码 | `` `代码` `` | — |
| 代码块 | ` ```语言名 ` 开头并换行 | — |
| 插入表格 | 用竖线符号分隔各列 | 工具栏表格按钮 |
| 任务清单 | `- [ ] 待办` | — |
| 数学公式 | `$E=mc^2$` | — |
实测中我在左侧写了一段包含加粗、斜体、代码块、行内公式和任务清单的内容，右侧立即渲染出排版好的效果，公式和代码高亮都正常显示。
## 一键导出 HTML / PDF / Markdown
写完后，点击编辑器顶部的导出按钮即可保存成果：
- **导出 HTML**：生成一个自包含的网页文件，可直接用浏览器打开或嵌入自己的网站；
- **导出 PDF**：生成排版完整的 PDF，适合打印、归档或对外发送；
- **导出 Markdown**：导出 `.md` 源文件，方便迁移到 Typora、Obsidian、GitHub 等其他工具继续编辑。
三种格式我都实测导出成功：HTML 文件样式完整可直接打开，PDF 排版与预览一致，Markdown 源文件内容无丢失。
## 进阶：多设备预览模式
预览区右上角提供 Desktop / Tablet / Mobile-Wechat 三种宽度切换：
点击「Mobile/Wechat」后，右侧内容会收窄为手机宽度重新排版。如果你打算把文章发到微信公众号、知识星球或主要在手机上阅读，强烈建议先切到该模式检查一遍标题换行、代码块折行是否正常，确认无误再导出。
## 常见问题
**Q1：刷新页面后内容会丢失吗？**
编辑器内容会保存在浏览器本地，刷新页面通常不会丢失；但更换设备或清理浏览器数据后会被清除，重要文档建议及时导出 Markdown 源文件备份。
**Q2：导出的 PDF 排版与预览不一致怎么办？**
先在预览区确认渲染正常再导出；内容很长时建议分章节导出，并把图片改用小尺寸后再导出。
**Q3：支持插入图片吗？**
编辑器以文本写作为主，可通过 Markdown 图片语法 `` 引用网络图片，预览区会正常显示。
**Q4：公式写法和 LaTeX 一样吗？**
行内公式用 `$...$`，块级公式用 `$$...$$`，语法与 LaTeX 基本一致，例如 `$E=mc^2$` 会渲染为 E=mc²。
## 总结与相关工具
工具派 Markdown编辑器把「写源码」和「看效果」放在同一个屏幕里，配合三种导出格式和多设备预览，从草稿到成稿一条流程走完。写作前后如果还需要处理文档格式，可以搭配这些工具：
- [Word转PDF](/tools/word_to_pdf)：把 Word 文档快速转为标准 PDF，保留字体排版
- [PDF转（Word/图片/HTML/文本）](/tools/pdf_to)：PDF 与 Word、图片、HTML、文本互转
- [图片压缩](/tools/image_compress)：压缩插图体积，加快网页加载速度
- [二维码生成器](/tools/qrcode)：把文章链接生成二维码，方便扫码分享
赶快打开[Markdown编辑器](/tools/markdown_editor)，写下你的第一篇文章吧！