一个功能丰富的桌面 Markdown 编辑器,基于 Electron + CodeMirror + marked 构建,支持实时预览、多标签页、暗色界面和丰富的窗口模式。
| 模块 | 特性 |
|---|---|
| 编辑 | 语法高亮 (highlight.js 190+ 语言)、行号、实时预览、同步滚动、拖拽分栏、Tab 缩进 |
| 工具栏 | 18 个格式按钮 + 多格式导出 + 历史 + 大纲 + AI,图标 + 文字标签 |
| 窗口 | 自定义标题栏、置顶、悬浮模式、贴边收缩、自由缩放 |
| 文件 | 打开/保存/导出 HTML/PDF/拖放、最近文件历史 |
| 标签页 | 多文件编辑、Ctrl+N 新建、Ctrl+W 关闭、关闭前保存提示 |
| 预览 | 完整 GFM、任务清单、Mermaid 图表、代码高亮、链接自动识别、中文优化 |
| 主题 | 4 套预览主题 (Dark/Light/Sepia/Nord) + 3 套编辑器主题 + 自定义 CSS |
| 智能 | 文档大纲 (TOC)、图片粘贴上传、Agent 级 AI 助手(工具调用 + 自主执行) |
- Node.js 16+
- Windows 10/11 (x64)
# 1. 克隆或解压项目后进入目录
cd MarkdownEditTool
# 2. 安装依赖
npm install
# 3. 启动开发模式
npm start# 生成 portable 单文件 exe,输出到 release/MarkdownEditor-win32-x64/
npm run build打包结果:
release/MarkdownEditor-win32-x64/MarkdownEditor.exe,双击即可运行,无需安装。
- Markdown 源码编辑 — 左侧编辑区,基于 CodeMirror,支持语法高亮和行号显示
- 实时预览 — 右侧实时渲染 Markdown 为 HTML,使用 marked 解析
- 同步滚动 — 编辑区与预览区滚动位置联动
- 拖拽分栏 — 拖动中间分栏线自由调节编辑/预览比例(20% ~ 80%)
- Tab 缩进 — 编辑区按 Tab 插入 2 个空格;有选区时批量缩进
工具栏每个按钮由 图标 + 文字标签 组成,鼠标悬停显示详细功能与快捷键提示。
| 按钮 | 功能 | 说明 |
|---|---|---|
| H2 / H3 | 插入标题 | 支持多行逐行加标题(## / ### ) |
| B | 粗体 | 包裹 **文字**,无选区时插入占位 |
| I | 斜体 | 包裹 *文字* |
| 删除线 | 包裹 ~~文字~~ |
|
| </> | 行内代码 | 包裹 code |
| 按钮 | 功能 | 说明 |
|---|---|---|
| ≡ | 无序列表 | 行首加 - ,支持多行逐行 |
| 1. | 有序列表 | 行首加 1. 2. 3. 自动编号 |
| ☑ | 任务清单 | 行首加 - [ ] |
| ❝ | 引用 | 行首加 > |
| 按钮 | 功能 | 说明 |
|---|---|---|
| { } | 代码块 | 有选区则包裹 ```;无选区插入带语言占位 |
| ⊞ | 表格 | 插入 3×3 表头模板 |
| 🔗 | 链接 | [文字](URL),自动包裹选区 |
| 🖼 | 图片 |  |
| ― | 分隔线 | 插入 --- |
| 按钮 | 功能 |
|---|---|
| 📂 打开 | 打开 .md / .markdown / .txt 文件 |
| 💾 保存 | 有路径直接保存;无路径弹出"另存为" |
| ⬇ 导出 | 导出为带完整样式的 HTML 文件 |
| 📄 示例 | 加载一篇示例 Markdown |
| 🕒 历史 | 查看最近打开的文件,点击重新加载 |
| 快捷键 | 功能 |
|---|---|
Ctrl + B |
粗体 |
Ctrl + I |
斜体 |
Ctrl + H |
标题(H2) |
Ctrl + Q |
引用 |
Ctrl + K |
链接 |
Ctrl + S |
保存 |
Ctrl + Z |
回退上一次 AI 编辑(无版本时回退原生撤销) |
Ctrl + N |
新建标签页 |
Ctrl + W |
关闭当前标签页 |
- 顶部标签栏显示所有打开的文件,支持点击切换
- 每个标签右侧有关闭按钮
× - 未保存的文件标签显示 脏标记(●)
- 关闭有未保存修改的标签时,弹出系统对话框:
- 保存 → 有路径直接写入;无路径弹出"另存为"
- 不保存 → 丢弃修改并关闭
- 取消 → 保持标签打开
- 关闭最后一个标签时自动新建空白页,不会归零
- 打开文件、历史项、拖放文件均在新标签中打开
- 自定义标题栏 — 深色拖拽区域,无系统边框
- 最小化 / 最大化 / 关闭 — 标题栏右侧按钮
- 双击标题栏 — 最大化 / 恢复
- 置顶显示 — 📌 切换窗口始终在最前
- 悬浮模式 — 🗗 切换 380×520 置顶小窗,只显示预览区
- 贴边收缩 — 悬浮时拖到屏幕边缘收缩为 48×48 图标
- 图标可 拖拽移动,松手后自动吸附最近的屏幕边缘
- 点击图标恢复悬浮窗口
- 自由缩放 — 窗口可随意拖拽调整大小(最小 400×300)
- 打开文件 — 打开 .md / .markdown / .txt
- 保存 .md — 有路径直接保存;首次保存弹出"另存为"
- 导出 .html — 导出带完整暗色样式的 HTML 文件
- 拖放打开 — 拖拽文件到编辑区直接打开
- 加载示例 — 工具栏示例按钮加载演示文档
关闭有未保存更改的标签页时,会弹出提示框询问是否保存,防止误丢修改。
- 工具栏 🕒 历史 按钮打开最近文件下拉列表
- 最多记录 12 个 最近打开的文件(按路径去重)
- 显示文件名、完整路径、相对时间(今天 / 昨天 / N 天前 / 日期)
- 点击历史项直接重新加载该文件
- 文件已删除时自动从历史移除并提示
- 支持 清空历史
- 点击列表外部自动关闭
- 状态栏 — 显示行数、词数、字符数
- 光标位置 — 实时显示行号列号(Ln / Col)
- 编码 — 显示 UTF-8
- 完整 Markdown 语法 — 标题、段落、列表、引用、代码、表格、链接、图片
- 任务清单 —
[x]/[ ]复选框渲染(GFM) - 代码高亮 — 暗色背景代码块,关键字/字符串/数字/注释/函数着色
- 链接自动识别 — 自动转换裸 URL 为可点击链接
- 中文优化 — 智能标点排版
AI 助手具备 Agent 能力——输入指令后,AI 会自主调用工具、多步执行、直到任务完成,类似 Claude Code CLI 的体验。不再是单次问答,而是真正的自主编辑。
点击工具栏 ⚙ 设置 →「AI 助手」标签页,填写:
- 接口地址 — 兼容 OpenAI API 格式的服务地址(如
https://api.openai.com/v1/chat/completions) - API Key — 认证密钥
- 模型 — 模型名称(建议使用支持工具调用的模型,如 GPT-4、Claude 3.5 等)
- 温度 — 控制随机性(0~1)
- 思考模式 — 开启后启用扩展推理(适用于支持的模型)
- 快捷按钮 — 续写 / 润色 / 翻译 / 总结,点击即向 Agent 发送预构建指令
- 自定义指令 — 在输入框直接输入任务(如"帮我把所有标题改成 H2"),按 Enter 发送
- 多轮对话 — Agent 保留对话历史,可持续交互
- 清空对话 — 点击面板标题栏的 🗑 按钮清空历史
Agent 可自主使用以下工具操作当前文档:
| 工具 | 说明 |
|---|---|
read_document |
读取文档全文 |
edit_document |
精确查找并替换文本 |
insert_at_cursor |
在光标处插入文本 |
get_selection |
获取当前选区 |
- 用户发送指令
- Agent 分析任务,自主决定调用哪些工具
- 每个工具执行后,结果反馈给 Agent
- Agent 根据结果决定下一步(继续调用工具 / 回复总结)
- 任务完成后,Agent 给出简要总结
MarkdownEditTool/
├── main.js # Electron 主进程(窗口、IPC、文件操作)
├── preload.js # 安全桥接(contextBridge 暴露 API)
├── renderer.js # 渲染进程(编辑器、预览、标签、历史、拖拽)
├── index.html # 应用 HTML 结构
├── styles.css # 全局样式(暗色主题)
├── package.json # 项目配置 + 打包配置
├── build/
│ ├── icon.png # 应用图标(PNG)
│ └── icon.ico # 应用图标(ICO,多分辨率)
├── node_modules/ # 依赖
│ ├── electron/
│ ├── codemirror/ # Markdown 编辑器引擎
│ ├── marked/ # Markdown → HTML 解析
│ ├── dompurify/ # HTML 安全过滤
│ └── highlight.js/ # 代码高亮(备用)
└── release/ # 打包输出目录
└── MarkdownEditor-win32-x64/
└── MarkdownEditor.exe # 可执行文件
| 依赖 | 用途 |
|---|---|
| electron | 桌面应用框架 |
| codemirror | 代码编辑器(语法高亮、行号、编辑能力) |
| marked | Markdown 解析为 HTML |
| dompurify | 预览 HTML 安全过滤(防 XSS) |
| highlight.js | 代码语法高亮(190+ 语言) |
| mermaid | Mermaid 图表渲染(流程图、时序图、甘特图等) |
npm startnpm run build输出:release/MarkdownEditor-win32-x64/MarkdownEditor.exe
使用
electron-packager打包,直接复用本地 Electron,无需联网下载。打包结果为绿色 portable 版本,解压双击即可运行。
替换 build/icon.png(256×256)后重新运行 npm run build,打包时会自动生成 .ico 并嵌入 exe。
MIT License