一个轻量级、功能强大的 Markdown 在线编辑器

13 阅读1分钟

背景

在写技术文档、笔记或者博客时,我一直在寻找一个既轻量又好用的 Markdown 编辑器。不需要登录,不需要复杂配置,打开就能用。最近发现了一个很棒的项目——Markdown 在线编辑器,分享给大家。

核心特性

1. 双栏实时预览

image.png 访问网站,左侧是编辑区,右侧是实时预览区。编辑什么,预览什么,所见即所得。

2. 内置 Mermaid 图表支持

这是我最喜欢的功能!在 Markdown 中插入 Mermaid 语法,就能自动渲染成流程图、序列图、类图、状态图。

graph TD
    A[开始] --> B[处理]
    B --> C{判断}
    C -- 是 --> D[成功]
    C -- 否 --> E[失败]
    D --> F[结束]
    E --> B

3. PDF 导出支持

点击右下角的 "+" 按钮,可以选择导出为 MD 或 PDF。PDF 导出会自动渲染所有图表,非常适合整理成文档。

4. 工具栏 + 快捷键

  • 工具栏按钮一键插入粗体、斜体、标题、引用、代码块等
  • Ctrl/Cmd + B 加粗,Ctrl/Cmd + I 斜体,Ctrl/Cmd + M 插入流程图

技术栈

完全基于原生技术栈,零依赖:

  • Marked.js:Markdown 解析
  • Mermaid.js:图表渲染
  • html2canvas + jsPDF:PDF 导出

快速开始

# 克隆仓库
git clone https://github.com/ZBIGBEAR/md.git
cd md

# 直接打开 index.html 即可使用
open index.html

或者直接访问在线版本:zbigbear.github.io/md

总结

这个项目虽然轻量,但功能却很完整。单文件 HTML,无需构建,打开即用。如果你需要一个简洁的 Markdown 编辑器,强烈推荐试试这个项目!

项目地址:github.com/ZBIGBEAR/md