9.6 KiB
9.6 KiB
MarkLite
轻量级 Windows 本地 Markdown 编辑器
基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开 · 搜索替换 · 文件树。
✨ 功能特性
| 功能 | 说明 |
|---|---|
| 📑 多标签页 | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab 切换 |
| 📂 文件打开 | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） |
| ✏️ 实时编辑 | 左侧编辑器，支持 Tab 缩进、行号显示、光标位置 |
| 👁 实时预览 | 右侧预览面板，编辑即渲染，滚动同步 |
| 🔤 代码高亮 | 基于 highlight.js，支持 180+ 种编程语言语法高亮 |
| 🎨 三种视图 | 分屏模式 / 纯编辑 / 纯预览，自由切换 |
| 📐 分屏调节 | 拖拽中间分隔条，自由调整编辑区与预览区比例 |
| 🌙 暗色主题 | 一键切换亮色/暗色主题，偏好自动记忆 |
| 🔔 文件监听 | 外部修改文件时自动提示，支持重新加载 |
| 💾 文件保存 | 保存 / 另存为，支持 .md 和 .txt 格式 |
| 🔍 搜索替换 | Ctrl+F 搜索、Ctrl+H 替换，支持高亮匹配、大小写、正则表达式 |
| 📁 文件树 | 侧边栏浏览项目目录，点击打开文件，自动刷新 |
| ⌨️ 快捷键 | 完整的键盘快捷键支持，操作高效 |
| 📦 NSIS 安装包 | 一键打包为 Windows exe 安装程序 |
📸 界面预览
┌──────────────────────────────────────────────────────────────────────────┐
│ MarkLite - README.md ─ □ ✕ │
├──────────────────────────────────────────────────────────────────────────┤
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
├──────────────────────────────────────────────────────────────────────────┤
│ [README.md] [DESIGN.md] [main.js] [+] │
├──────────┬─────────────────────────┬─────────────────────────────────────┤
│ 资源管理器│ │ │
│ ▼ MarkLite│ 🔍 查找... 3/12 │ MarkLite │
│ 📁 src │ [替换... ] [替换][全部]│ ───────────── │
│ 📄 README│ │ │
│ 📄 DESIGN│ 1 # MarkLite │ 一款轻量级的 Windows 本地 │
│ 📁 lib │ 2 │ Markdown 编辑器桌面应用... │
│ 📁 assets│ 3 一款轻量级的... │ │
│ │ 4 │ ■ 实时编辑 │
│ │ 5 ## 功能特性 │ ■ 实时预览 │
│ │ 6 │ ■ 代码高亮 │
│ │ 7 - 📝 实时编辑 │ │
├──────────┴─────────────────────────┴─────────────────────────────────────┤
│ README.md │ UTF-8 │ Markdown │ 2.1 KB │ 行 9, 列 12 │
└──────────────────────────────────────────────────────────────────────────┘
🚀 快速开始
环境要求
- Node.js >= 16.x
- npm >= 8.x
- Windows 10/11 x64
安装与运行
# 克隆仓库
git clone https://gitee.com/thzxx/MarkLite.git
cd MarkLite
# 安装依赖
npm install
# 启动应用
npm start
打包为 exe 安装包
# 打包 Windows x64 NSIS 安装包
npm run build
# 打包为便携版（免安装）
npm run build:portable
打包完成后，安装包位于 dist/ 目录。详见 DEVSETUP.md。
⌨️ 快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + T |
新建标签页 |
Ctrl + W |
关闭当前标签页 |
Ctrl + Tab |
切换到下一个标签页 |
Ctrl + Shift + Tab |
切换到上一个标签页 |
Ctrl + O |
打开文件 |
Ctrl + S |
保存文件 |
Ctrl + Shift + S |
另存为 |
Ctrl + 1 |
编辑 + 预览（分屏） |
Ctrl + 2 |
纯编辑模式 |
Ctrl + 3 |
纯预览模式 |
Ctrl + F |
搜索 |
Ctrl + H |
搜索并替换 |
Enter / Shift+Enter |
下一个 / 上一个匹配 |
Alt + C |
切换区分大小写 |
Alt + R |
切换正则表达式 |
Ctrl + Shift + G |
替换当前匹配 |
Ctrl + Shift + H |
全部替换 |
Esc |
关闭搜索栏 |
🛠️ 技术栈
| 组件 | 技术 | 说明 |
|---|---|---|
| 桌面框架 | Electron v28 | 跨平台桌面应用框架 |
| Markdown 解析 | marked.js v12 | 高性能 Markdown 解析器 |
| 代码高亮 | highlight.js v11 | 代码语法高亮引擎 |
| 打包工具 | electron-builder | 生成 exe 安装包 |
| 前端 | HTML + CSS + JavaScript | 原生技术，零框架依赖 |
📁 项目结构
MarkLite/
├── package.json # 项目配置 & electron-builder 打包配置
├── main.js # Electron 主进程（窗口、文件系统、IPC）
├── preload.js # 预加载脚本（安全 IPC 桥接）
├── renderer/
│ ├── index.html # 主页面结构
│ ├── style.css # UI 样式（亮色/暗色主题）
│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览）
├── lib/
│ ├── marked.min.js # marked.js（本地离线）
│ ├── highlight.min.js # highlight.js（本地离线）
│ └── highlight-github.css # GitHub 风格代码主题
├── assets/
│ └── icon.ico # 应用图标（多尺寸）
├── DESIGN.md # 架构设计文档
├── DEVSETUP.md # 开发环境配置指南
├── LICENSE # MIT 许可证
└── README.md # 项目说明
🏗️ 架构设计
┌──────────────────────────────────────────┐
│ Main Process (main.js) │
│ 窗口管理 · 文件系统 · 文件监听 · IPC │
│ 目录树读取 · 侧边栏目录监听 │
└──────────────┬───────────────────────────┘
│ contextBridge (安全隔离)
┌──────────────▼───────────────────────────┐
│ Preload Script (preload.js) │
│ 安全 API 桥接层 │
└──────────────┬───────────────────────────┘
│
┌──────────────▼───────────────────────────┐
│ Renderer Process (renderer/) │
│ 标签页 · 编辑器 · 预览 · 暗色主题 │
│ 搜索替换 · 文件树侧边栏 · 拖拽 · 快捷键 │
│ localStorage │
└──────────────────────────────────────────┘
安全策略：
contextIsolation: true+nodeIntegration: false+ CSP，渲染进程无法直接访问 Node.js API。
📝 支持的 Markdown 语法
- ✅ 标题（h1 ~ h6）
- ✅ 粗体 / 斜体 /
删除线 - ✅ 有序列表 / 无序列表
- ✅ 任务列表
- [x] - ✅ 代码块（围栏式 + 语法高亮）
- ✅ 行内代码
- ✅ 链接 / 图片
- ✅ 表格
- ✅ 引用块
- ✅ 水平线
- ✅ HTML 内联元素
- ✅ GFM（GitHub Flavored Markdown）
📄 许可证
MIT License © 2026 thzxx
如果觉得有用，请点个 ⭐ Star 支持一下！