一个轻量级的浏览器端 Markdown 编辑器,适合快速编写文档和笔记。不需要安装任何软件,打开浏览器即可使用。
功能特性
- 实时预览 - 左侧编辑,右侧即时显示渲染结果
- 语法高亮 - 代码块自动识别语言并着色
- 导出选项 - 支持 HTML、PDF 和图片格式
- 本地存储 - 自动保存草稿到浏览器 localStorage
- 暗色模式 - 跟随系统偏好切换主题
技术栈
| 组件 | 选择 | 原因 |
|---|---|---|
| Markdown 解析 | marked.js | 速度快,支持扩展 |
| HTML 生成 | Turndown | 双向转换能力 |
| PDF 导出 | html2pdf.js | 零依赖方案 |
| 代码高亮 | highlight.js | 语言覆盖全面 |
架构设计
src/├── components/│ ├── Editor.astro # 主编辑器组件│ ├── Preview.astro # 预览面板│ └── Toolbar.astro # 工具栏按钮├── lib/│ ├── markdown.ts # Markdown 渲染逻辑│ └── exporter.ts # 导出功能实现└── styles/ └── editor.css # 编辑器样式使用方式
访问在线版本:https://markdown-editor.example.com
- 在编辑区输入 Markdown 内容
- 右侧自动显示渲染结果
- 点击工具栏导出按钮选择格式
- 文件会自动下载到本地
未来计划
- 支持协作编辑
- 增加公式渲染(KaTeX)
- 云同步功能
- 移动端优化
当前版本 v1.0.2,最后更新:2026-05-15。