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


## 工具简介：在线 Markdown 编辑器是什么

Markdown 是一种轻量级标记语言，用几个简单符号就能排出层次分明的文章，深受程序员、博主和笔记爱好者喜爱。工具派的「Markdown编辑器」是一款**免安装、打开浏览器即用**的在线写作工具：

- **双栏实时预览**：左侧写源码，右侧即时渲染，格式效果一目了然
- **所见即所得**：加粗、代码高亮、数学公式、任务清单、表格均可实时预览
- **三种导出格式**：一键导出 HTML 网页、PDF 文档或 Markdown 源文件
- **多设备预览**：支持桌面 / 平板 / 手机微信三种宽度，发文前即可检查手机端排版

无论是写技术博客、整理课堂笔记，还是给公众号排版，都能用它高效完成。

## 认识双栏编辑界面

打开工具后，编辑区域分为左右两栏：

![图1：Markdown编辑器双栏界面，左侧写源码右侧实时预览](/api/file/download?path=article/202607/1783784921198_5764.png)

1. **顶部工具栏**：提供标题、加粗、斜体、代码块、表格、流程图等快捷按钮，不熟悉语法也能点按插入；
2. **左侧源码区**：在这里输入 Markdown 内容，支持语法高亮，长时间写作不费眼；
3. **右侧预览区**：输入内容会即时渲染成最终效果，加粗、代码块、行内公式、任务清单等一目了然。

> 小技巧：左右两栏会同步滚动，对照修改很方便。

## 工具栏与常用快捷键

工具栏图标与快捷键一一对应，熟练之后写作效率翻倍：

| 操作 | Markdown 写法 | 快捷键 |
| --- | --- | --- |
| 一级~六级标题 | `#` ~ `######` | Ctrl + 1 ~ 6 |
| 粗体 | `**文字**` | Ctrl + B |
| 斜体 | `*文字*` | Ctrl + I |
| 行内代码 | `` `代码` `` | — |
| 代码块 | ` ```语言名 ` 开头并换行 | — |
| 插入表格 | 用竖线符号分隔各列 | 工具栏表格按钮 |
| 任务清单 | `- [ ] 待办` | — |
| 数学公式 | `$E=mc^2$` | — |

实测中我在左侧写了一段包含加粗、斜体、代码块、行内公式和任务清单的内容，右侧立即渲染出排版好的效果，公式和代码高亮都正常显示。

## 一键导出 HTML / PDF / Markdown

写完后，点击编辑器顶部的导出按钮即可保存成果：

![图2：编辑器顶部导出按钮，支持导出HTML、PDF、Markdown三种格式](/api/file/download?path=article/202607/1783785037586_9893.png)

- **导出 HTML**：生成一个自包含的网页文件，可直接用浏览器打开或嵌入自己的网站；
- **导出 PDF**：生成排版完整的 PDF，适合打印、归档或对外发送；
- **导出 Markdown**：导出 `.md` 源文件，方便迁移到 Typora、Obsidian、GitHub 等其他工具继续编辑。

三种格式我都实测导出成功：HTML 文件样式完整可直接打开，PDF 排版与预览一致，Markdown 源文件内容无丢失。

## 进阶：多设备预览模式

预览区右上角提供 Desktop / Tablet / Mobile-Wechat 三种宽度切换：

![图3：切换Mobile/Wechat预览模式，内容收窄为手机宽度排版](/api/file/download?path=article/202607/1783785041951_8503.png)

点击「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)，写下你的第一篇文章吧！




手把手教你用工具派在线Markdown编辑器：双栏实时预览写作、工具栏与快捷键速查、一键导出HTML/PDF/Markdown，附多设备预览模式详解。

Markdown编辑器教程：双栏实时预览写作，一键导出HTML/PDF（快捷键速查）