Skip to content

Repository files navigation

Markdown Editor

一个功能丰富的桌面 Markdown 编辑器,基于 Electron + CodeMirror + marked 构建,支持实时预览、多标签页、暗色界面和丰富的窗口模式。

platform electron license


目录


功能概览

模块 特性
编辑 语法高亮 (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

打包成 exe

# 生成 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 斜体 包裹 *文字*
S 删除线 包裹 ~~文字~~
</> 行内代码 包裹 code

列表与引用

按钮 功能 说明
无序列表 行首加 - ,支持多行逐行
1. 有序列表 行首加 1. 2. 3. 自动编号
任务清单 行首加 - [ ]
引用 行首加 >

插入元素

按钮 功能 说明
{ } 代码块 有选区则包裹 ```;无选区插入带语言占位
表格 插入 3×3 表头模板
🔗 链接 [文字](URL),自动包裹选区
🖼 图片 ![描述](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 助手具备 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 获取当前选区

工作流程

  1. 用户发送指令
  2. Agent 分析任务,自主决定调用哪些工具
  3. 每个工具执行后,结果反馈给 Agent
  4. Agent 根据结果决定下一步(继续调用工具 / 回复总结)
  5. 任务完成后,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 start

打包 portable exe

npm run build

输出:release/MarkdownEditor-win32-x64/MarkdownEditor.exe

使用 electron-packager 打包,直接复用本地 Electron,无需联网下载。打包结果为绿色 portable 版本,解压双击即可运行。

自定义图标

替换 build/icon.png(256×256)后重新运行 npm run build,打包时会自动生成 .ico 并嵌入 exe。


许可证

MIT License

About

Feature-rich desktop Markdown editor with AI Agent (tool-use), version history, live preview — Electron + CodeMirror + marked

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages