科技船长 · projects

Markdown Live Editor

326 words 1 min read #Tool#Editor#Markdown

一个轻量级的浏览器端 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

  1. 在编辑区输入 Markdown 内容
  2. 右侧自动显示渲染结果
  3. 点击工具栏导出按钮选择格式
  4. 文件会自动下载到本地

未来计划

  • 支持协作编辑
  • 增加公式渲染(KaTeX)
  • 云同步功能
  • 移动端优化

当前版本 v1.0.2,最后更新:2026-05-15。