在线 Markdown 编辑器实战:左写右预览,写好 README、笔记和文档

我做前端这几年,文档和笔记几乎都用 Markdown 写。语法简单,纯文本好存,丢进 Git 也能看 diff。麻烦的只有一件事:写的时候不知道渲染出来长什么样。标题层级对不对,表格列有没有对齐,代码块的语言高亮有没有生效,得切到另一个工具贴一遍才知道。一个左边写、右边实时预览的在线编辑器,正好把这一步省掉了。

为什么要左写右预览

实时预览的价值,说白了就是所写即所得。你在左栏敲一个 ## 小标题,右栏立刻多出一个二级标题;你写一行表格分隔符,右栏马上把表格画出来。光标在哪一段,预览滚动条就跟到哪一段,长文档来回核对省得满屏找。这种即时反馈让你专注在内容上,而不是反复猜测格式。

Markdown 实时编辑器就是这么设计的:左边输入,右边渲染,最右侧还自动生成一份大纲,标题加得越多,大纲越完整,整篇文档的结构一眼就能看清。预览这边做了 200 毫秒的去抖,你停手才重新解析,十万字符的稿子也不卡。

常用语法一次记住

Markdown 真正高频的语法就那么几样,记住下面这些,日常文档基本够用。

标题用井号,几个井号就是几级:# 一级、## 二级、### 三级。

无序列表用减号或星号开头,有序列表用数字加点:

- 第一项
- 第二项
  - 缩进两格是子项

1. 步骤一
2. 步骤二

行内代码用反引号包住,像 npm install;整段代码用三个反引号围起来,后面跟语言名就能高亮。链接是方括号配圆括号:[文字](网址)。表格用竖线分列,第二行用减号和冒号控制对齐。

一个真实例子:语法和渲染效果对照

下面这段 Markdown,左栏敲进去:

## 部署检查清单

| 步骤 | 命令 | 状态 |
|:-----|:-----|:----:|
| 构建 | `pnpm build` | 完成 |
| 部署 | `reload nginx` | 待办 |

> 提示: 部署前先跑一遍冒烟测试。

- [x] 已合并到主分支
- [ ] 已发布说明

右栏立刻渲染成:一个带表头和居中状态列的三列表格,一段灰色竖线引用框,以及两个复选框,一个打勾一个空着。表格的对齐冒号、代码块里的等宽字体、引用的样式,全都按你写的样子出现,完全不用脑补。

写 README、笔记和文档都顺手

这几类正好是 Markdown 的主场。写项目 README,标题会自动带上 GitHub 兼容的锚点 id,重名的还会自己加 -1、-2,导出后锚点链接照样能跳。开会做纪要,行动项写成 - [ ] 责任人任务截止时间,预览里就是真正的复选框,看着比纯文本正式很多。写技术博客,代码块按 8 种常见语言上色,关键字、字符串、注释分得清清楚楚。

我自己最常用的是写完点复制富文本,直接粘到飞书群里。剪贴板会同时放两份内容,一份 HTML 一份 Markdown 源码,粘到飞书钉钉企业微信里标题加粗代码块全在,粘到只接纯文本的输入框拿到的又是干净源码,一次复制两边都能用,不用回来重排一遍。需要统计字数核对篇幅时,我会顺手开字数统计对一下;要把现成的 .md 一次性转成网页代码,就走 Markdown 转 HTML,各管各的场景。

本地不上传,写完就能导出

写文档常涉及还没公开的内容,数据安全是底线。这个编辑器的解析、代码高亮、字数统计、草稿自动保存、所有导出,全在你自己的浏览器里跑,文字不会发到任何服务器。草稿每 800 毫秒自动写一次浏览器本地存储,标签页崩了重新打开,稿子还在。打开页面之后断网,编辑器照样能用。

导出有三种:下载 .md 文件直接进仓库,下载内联样式的单文件 .html 浏览器打开就能看,要 PDF 就打开那个 .html 用浏览器的打印另存为 PDF,出来的版面比前端 PDF 库干净得多。

写文档这件事,工具越省心越好。一个不上传、实时预览、写完直接导出的编辑器,基本就把从动笔到交付的链路打通了。

Made by Toolora · Updated 2026-06-13