介绍

写 Markdown 的场合比想象中多:公众号初稿、项目 README、学习笔记、给同事的一份说明文档。重型编辑器装起来费劲,很多在线工具又要求登录,或者在一次网络抖动后把没保存的内容吃掉。

Markdown 编辑器 是为此做的一个极简版本:打开就能写,左边写、右边实时渲染,写完导出 .md 或 .html。解析器是自己写的,没有引入任何第三方库,所以页面加载快、不依赖 CDN,断网也能继续编辑。

功能特点

  • 三种视图:编辑、分栏、预览。写长文用分栏,专心码字用编辑,检查排版用预览。
  • 语法工具栏:加粗、斜体、删除线、H1/H2/H3、行内代码、代码块、表格、引用、分割线、链接、图片,点一下插入模板。
  • 实时字数统计:词数、字符数、行数,以及预计阅读时间。
  • 自动保存:编辑过程中自动写入本地存储,状态栏显示「已保存」,刷新页面内容还在。
  • 导出与复制:导出 Markdown(.md)、导出 HTML(.html)、复制 Markdown 源码、复制渲染后的 HTML。
  • 预览区深浅主题:默认跟随站点主题,也可以单独切换——晚上写东西时把预览区调暗更舒服。
  • 快捷键:Ctrl + S 导出,Ctrl + B 加粗。

支持的 Markdown 语法

标题(# 到 ######)、加粗与斜体、删除线、行内代码、围栏代码块、有序与无序列表、表格(含左/中/右对齐)、引用块、分割线、链接、图片。日常写技术文档和笔记基本够用。

使用教程

  1. 打开页面,光标已经在编辑区,直接开始写。
  2. 顶栏切换「分栏」可以看到实时预览效果;写完想通读一遍就切到「预览」。
  3. 需要插入表格时,点工具栏的表格按钮会插入一个带对齐写法的模板,直接改内容即可。
  4. 写完后点「导出 Markdown ( .md )」保存源文件,或者点「导出 HTML ( .html )」拿到可以直接放进网页的渲染结果。
  5. 想粘贴到公众号或 CMS 后台时,用「复制 HTML」把渲染后的富文本放进剪贴板。
  6. 需要从头开始时点「清空」——注意这会清掉本地保存的内容,建议先导出。

适合哪些场景

  • 写公众号 / 博客初稿:Markdown 写结构,导出 HTML 后再套排版模板。
  • 技术文档与 README:直接写 .md 提交到仓库,格式就是最终格式。
  • 课堂笔记:配合标题和列表快速搭骨架,比 Word 快。
  • 临时记事:不想为一个便签打开重型软件,浏览器标签页就够。

常见问题 FAQ

Q: 内容保存在哪里?关掉浏览器会丢吗?

编辑内容会自动保存在本机浏览器本地存储里,正常关闭页面再打开内容还在。但如果清理了浏览器「站点数据」,内容会被一并清除,重要文档请及时导出 .md 文件。

Q: 导出的 HTML 带样式吗?

导出的 HTML 文件内嵌了预览区使用的样式,用浏览器直接打开就是渲染后的样子,也可以复制进其他系统继续加工。

Q: 支持数学公式和流程图吗?

暂不支持。这类扩展需要额外引入 KaTeX / Mermaid 之类的库,会增加加载体积与外部依赖;如果你有强需求,用支持插件的本地编辑器更合适。

Q: 为什么刷新后排版和刚才不一样?

检查一下预览区的主题按钮是否被手动切换过。预览主题一旦手动设置,就以手动值为准,不再跟随站点主题——文字颜色会随之变化,但内容本身没有改动。

相关工具