Skip to content

Elegant ultra-lightweight Markdown editor — a free, zero-install alternative to Typora. Pure HTML5/JS, real-time preview, dark mode, syntax highlighting, PDF/PNG export with themes & watermarks. No Electron, no framework, just open and write. 极简 Markdown 编辑器,Typora 免费平替,打开即用,零依赖。

Notifications You must be signed in to change notification settings

vorojar/MarkFlow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MarkFlow

优雅专业的 Markdown 超轻量编辑器,为开发者、技术写作者和内容创作者提供极致的写作体验,提供 Markdown 转 HTML 富文本和 Markdown 转 PNG 图片导出功能。

GitHub stars License

DEMO

demo

特色功能

专业编辑体验

  • 实时双栏预览 - 所见即所得的编辑体验
  • 深色模式 - 支持浅色/深色主题切换,自动跟随系统偏好
  • 代码高亮 - 支持多种编程语言语法高亮(基于 highlight.js)
  • 行号显示 - 精确定位,方便协作
  • 字数统计 - 实时显示字数、字符数、预计阅读时间
  • 文件拖放 - 拖放 .md 文件直接导入编辑

高效工具集

  • 快捷工具栏 - 一键插入标题、加粗、斜体、链接、图片、代码块、引用、列表、表格等
  • 文本高亮 - 支持 ===高亮=== 语法和选中高亮
  • 快捷键支持 - Ctrl+B 加粗、Ctrl+I 斜体、Ctrl+K 链接、Ctrl+H 标题
  • 一键复制 - 支持复制 Markdown 源码和 HTML 富文本
  • 本地存储 - 自动保存内容,防止意外丢失

专业导出功能

  • PDF 导出 - 使用浏览器原生打印,完美支持分页控制
  • 图片导出 - 一键导出精美图片,完美还原 Markdown 样式
  • 自定义主题 - 多种背景颜色和边框样式
  • 水印设置 - 支持自定义水印文本

智能特性

  • 同步滚动 - 编辑区和预览区同步滚动
  • 选中映射 - 编辑区选中文本自动在预览区高亮
  • 响应式设计 - 完美适配各种设备

快捷键

快捷键 功能
Ctrl+B 加粗
Ctrl+I 斜体
Ctrl+K 插入链接
Ctrl+H 插入标题
Tab 插入 4 个空格

适用场景

  • 技术文档撰写 - 为开发者提供专业的文档编写工具
  • 博客创作 - 为内容创作者提供优雅的写作环境
  • 社交媒体 - 导出精美图片分享到公众号、微博等平台
  • 学术写作 - 为研究者提供规范的写作格式

技术栈

技术 用途
HTML5 + 原生 JavaScript 前端核心
Tailwind CSS 样式框架
Marked.js Markdown 解析
DOMPurify XSS 安全过滤
highlight.js 代码语法高亮
html2canvas 图片导出
Font Awesome 图标库

快速开始

  1. 打开 MarkFlow 网页版
  2. 在左侧编辑区输入 Markdown 文本(或拖放 .md 文件)
  3. 右侧实时预览渲染效果
  4. 使用顶部工具栏快速排版
  5. 点击「生成PDF」或「生成图片」导出内容

参与贡献

我们欢迎所有形式的贡献,无论是新功能、bug 修复还是文档改进!

  1. Fork 本仓库
  2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交您的更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开一个 Pull Request

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

支持我们

如果您觉得 MarkFlow 对您有帮助,欢迎给我们一个 star

更新日志

v1.2.1 (2026年2月13日)

安全

  • 引入 DOMPurify,对 Markdown 渲染输出进行 XSS 安全过滤

修复

  • 修复按钮加载/错误状态丢失图标的问题
  • 修复预览区高亮选中文本时的范围越界问题
  • 修复字数统计事件重复绑定的问题

优化

  • 合并重复的工具栏 CSS 样式,减少冗余代码
  • 清空按钮操作后同步更新字数统计

v1.2.0 (2026年1月29日)

新功能

  • 新增深色模式,支持手动切换和自动跟随系统偏好
  • 新增字数统计功能,实时显示字数、字符数、预计阅读时间
  • 新增代码语法高亮,支持多种编程语言(基于 highlight.js)
  • 新增文件拖放导入,支持拖放 .md 文件到编辑器

优化

  • PDF 导出改用浏览器原生打印,完美支持分页控制
  • 图片导出宽度从 400px 增加到 600px,表格显示更完整
  • 代码块自动换行,不再显示水平滚动条
  • 移除未使用的设置选项(内边距、设备类型)
  • 移除废弃的 API 调用,代码清理优化

v1.1.0 (2025年3月25日)

  • 修复 PDF 导出时元素被分页截断的问题
  • 添加手机框效果,使图片导出更像手机截图
  • 解决图片导出时字符重叠问题
  • 优化文字渲染和排版

v1.0.0 (2025年1月30日)

  • 首次发布
  • 实现基本的 Markdown 编辑和预览功能
  • 添加实时保存功能
  • 支持图片和 PDF 导出

项目团队

  • 吴龙杰 - 项目负责人与主要开发者
  • Cursor+ Claude Sonnet3.5 - V1.0.0 ~ V1.1.0
  • Claude Code+Opus4.5 - V1.2.0
  • Claude Code+Opus4.6 - V1.2.1

Made with love by vorojar

About

Elegant ultra-lightweight Markdown editor — a free, zero-install alternative to Typora. Pure HTML5/JS, real-time preview, dark mode, syntax highlighting, PDF/PNG export with themes & watermarks. No Electron, no framework, just open and write. 极简 Markdown 编辑器,Typora 免费平替,打开即用,零依赖。

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors