我给自己写了一个 Markdown 编辑器,因为市面上的都不够用
简单、干净、不打扰,写作就该是这样子。

▲ Markdown Studio 主界面,左边编辑右边预览
做这个工具的想法,其实酝酿了很久。
作为一个常年写技术博客的人,我试过太多 Markdown 编辑器了:Typora 很优雅但收费了,VS Code 太重型还要装一堆插件,在线编辑器要么广告满天飞要么动不动就让你登录。
我就想要一个简单的东西:打开就能写,写完就能导出,别打扰我。
于是就有了这个 Markdown Studio。
它是什么
一句话:把写作、排版、预览和导出放在同一块工作台里。
没有复杂的功能树,没有花里胡哨的主题市场,就是一个干干净净的编辑界面,左边写,右边看,写完导出。
核心功能
实时预览
这是最基本的,但也是最重要的。你写的每一行字,右边立刻就能看到渲染效果。不用切换视图,不用按什么预览按钮。
写作统计
顶部实时显示三个数字:
- 字符数:当前文档长度
- 行数:适合控制结构和段落密度
- 字词数:写文档和说明时更方便控量
写技术文章的时候,我经常会看行数来控制段落节奏。太长的段落读者看着累,太短又显得零碎。
同步滚动
左边编辑区滚动的时候,右边预览区会跟着同步。这个功能很多编辑器都有,但我想说的是——它真的很好用。尤其是写长文的时候,你不需要来回翻找对应位置。
三种视图模式

▲ 左上角可快速切换视图模式
- 分栏:左右各一半,边写边看
- 仅编辑:全屏写作,沉浸式体验
- 仅预览:专注于最终效果
我大部分时间用分栏模式,但有时候想专心写东西,就切到仅编辑,整个世界都安静了。
常用片段插入

▲ 点击常用片段按钮,快速插入代码块、表格等格式
这是我自己最离不开的功能。写技术文章经常要插入一些固定格式:
- 代码块
- 引用块
- 表格
- 列表
点一下就直接插入到编辑区,不用记语法,不用敲一堆反引号。
一键复制预览

▲ 点击「复制预览」,渲染好的内容直接复制到剪贴板
这个功能是我后来加的,但用下来发现真香。
写完文章后,点一下「复制预览」,整个渲染好的内容就复制到剪贴板了。然后你去 WordPress 或者知乎,直接粘贴就搞定。
格式不会乱,代码块是代码块,引用是引用,图片也能正常显示。
我之前写文章,要在 Markdown 源文件和最终格式之间折腾半天。现在是真的一键搞定:写完 → 复制 → 粘贴 → 发布。
本地自动保存
这个功能可能不起眼,但救过我无数次。写到一半浏览器崩溃了?刷新一下,内容还在。
所有数据都存在本地,不上传任何服务器。 你的文章就是你的,谁也拿不走。
为什么不用现成的
你可能会问,市面上这么多编辑器,为什么非要自己写一个?
理由很简单:没有一个是完全符合我需求的。
Typora 很好,但它越来越重了,而且收费之后我就在想,我是不是可以用更轻量级的方案?
VS Code 功能强大,但我只是写个 Markdown,为什么要打开一个完整的 IDE?
在线编辑器方便是方便,但我的内容不想存在别人的服务器上。
所以我就想,不如自己动手,做一个刚刚好够用的工具。
技术细节
如果你好奇的话,这个工具的技术栈很简单:
- 前端:纯静态页面
- 编辑器:基于开源组件定制
- 预览:实时 Markdown 渲染
- 存储:浏览器本地存储(LocalStorage)
没有后端,没有数据库,没有用户系统。打开网页就能用,关掉网页数据还在。
适合谁用
- 技术博主:写教程、写文档、写笔记
- 学生党:写论文、写报告、做笔记
- 任何人:只要你需要写点东西
如果你想要一个简单、干净、不打扰的写作环境,可以试试看。
最后
这个工具现在还是初版,功能不算多,但都是我日常写作中最需要的。
地址在这里:https://www.tinyash.com/tool/markdown
有任何建议或者 bug,欢迎反馈。
写作是件很私人的事。 工具不重要,重要的是你能不能静下心来,把想说的话说清楚。
我希望这个工具能帮你做到这一点。