270 lines
13 KiB
Markdown
270 lines
13 KiB
Markdown
<p align="center">
|
||
<img src="assets/icon.ico" alt="MarkLite" width="128" height="128">
|
||
</p>
|
||
|
||
<h1 align="center">MarkLite</h1>
|
||
|
||
<p align="center">
|
||
<strong>轻量级 Windows 本地 Markdown 编辑器</strong>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="https://img.shields.io/badge/Platform-Windows%20x64-blue?style=flat-square&logo=windows" alt="Platform">
|
||
<img src="https://img.shields.io/badge/Electron-28-47848F?style=flat-square&logo=electron" alt="Electron">
|
||
<img src="https://img.shields.io/badge/License-MIT-green?style=flat-square" alt="License">
|
||
<img src="https://img.shields.io/badge/Version-1.3.0-orange?style=flat-square" alt="Version">
|
||
</p>
|
||
|
||
<p align="center">
|
||
基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。<br>
|
||
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开 · 搜索替换 · 文件树。
|
||
</p>
|
||
|
||
---
|
||
|
||
## ✨ 功能特性
|
||
|
||
| 功能 | 说明 |
|
||
|------|------|
|
||
| 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab MRU 切换 |
|
||
| 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md），不支持的文件类型 Toast 提示 |
|
||
| ✏️ **实时编辑** | 左侧编辑器，支持 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
|
||
|
||
### 安装与运行
|
||
|
||
```bash
|
||
# 克隆仓库
|
||
git clone https://gitee.com/thzxx/MarkLite.git
|
||
cd MarkLite
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动应用
|
||
npm start
|
||
```
|
||
|
||
### 打包为 exe 安装包
|
||
|
||
```bash
|
||
# 打包 Windows x64 NSIS 安装包
|
||
npm run build
|
||
|
||
# 打包为便携版（免安装）
|
||
npm run build:portable
|
||
```
|
||
|
||
打包完成后，安装包位于 `dist/` 目录。详见 [DEVSETUP.md](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](https://www.electronjs.org/) v28 | 跨平台桌面应用框架 |
|
||
| Markdown 解析 | [marked.js](https://marked.js.org/) v12 | 高性能 Markdown 解析器 |
|
||
| 代码高亮 | [highlight.js](https://highlightjs.org/) v11 | 代码语法高亮引擎 |
|
||
| 打包工具 | [electron-builder](https://www.electron.build/) | 生成 exe 安装包 |
|
||
| 前端 | HTML + CSS + JavaScript | 原生技术，零框架依赖 |
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
MarkLite/
|
||
├── package.json # 项目配置 & electron-builder 打包配置
|
||
├── main.js # Electron 主进程（窗口、文件系统、IPC）
|
||
├── preload.js # 预加载脚本（安全 IPC 桥接）
|
||
├── renderer/
|
||
│ ├── index.html # 主页面结构
|
||
│ ├── style.css # UI 样式（亮色/暗色主题）
|
||
│ ├── core.js # 核心模块：DOM 引用、全局状态、工具函数、初始化
|
||
│ ├── tabs.js # 标签页模块：创建/切换/关闭、MRU、标签栏渲染
|
||
│ ├── editor.js # 编辑器模块：行号、光标、文件大小、滚动同步
|
||
│ ├── search.js # 搜索模块：搜索替换、高亮、正则、大小写
|
||
│ ├── sidebar.js # 侧边栏模块：文件树、独立文件、拖拽调宽
|
||
│ └── markdown.js # Markdown 模块：marked.js 初始化、XSS 清理、渲染
|
||
├── 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/) │
|
||
│ │
|
||
│ ┌─────────┐ ┌─────────┐ ┌───────────┐ │
|
||
│ │ core.js │ │ tabs.js │ │ editor.js │ │
|
||
│ │ 状态管理 │ │ 标签页 │ │ 编辑器 │ │
|
||
│ └─────────┘ └─────────┘ └───────────┘ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │ search.js│ │sidebar.js│ │markdown.js│ │
|
||
│ │ 搜索替换 │ │ 侧边栏 │ │ Markdown │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ 模块通过 window.MarkLite 命名空间通信 │
|
||
│ localStorage 持久化用户偏好 │
|
||
└──────────────────────────────────────────┘
|
||
```
|
||
|
||
> 安全策略：`contextIsolation: true` + `nodeIntegration: false` + CSP，渲染进程无法直接访问 Node.js API。
|
||
|
||
## 📝 支持的 Markdown 语法
|
||
|
||
- ✅ 标题（h1 ~ h6）
|
||
- ✅ **粗体** / *斜体* / ~~删除线~~
|
||
- ✅ 有序列表 / 无序列表
|
||
- ✅ 任务列表 `- [x]`
|
||
- ✅ 代码块（围栏式 + 语法高亮）
|
||
- ✅ 行内代码
|
||
- ✅ 链接 / 图片
|
||
- ✅ 表格
|
||
- ✅ 引用块
|
||
- ✅ 水平线
|
||
- ✅ HTML 内联元素
|
||
- ✅ GFM（GitHub Flavored Markdown）
|
||
|
||
## 📋 更新日志
|
||
|
||
### v1.3.0 (2026-05-21)
|
||
|
||
**新功能**
|
||
- 侧边栏文件夹目录树标题头
|
||
- 独立文件显示：打开文件夹外的文件时，侧边栏「已打开的文件」区域单独列出
|
||
- Toast 通知组件：拖拽不支持的文件类型时弹出提示
|
||
- MRU 标签切换：Ctrl+Shift+Tab 回到最近使用的标签
|
||
- 侧边栏拖拽调宽：右边缘拖拽调整宽度（180-500px），自动持久化
|
||
- 预览区本地图片支持：Markdown 中的相对路径图片自动转为 file:// URL
|
||
|
||
**优化**
|
||
- 搜索高亮定位：用 canvas measureText 替代硬编码 8px，适配不同字体
|
||
- 滚动同步精度：块级元素行号查找从 O(n) 优化为 O(1)（Set）
|
||
- 行号滚动同步：行号区域跟随编辑器滚动位置
|
||
- 拖拽文件反馈：不支持的文件类型弹出 Toast 提示而非静默忽略
|
||
|
||
**Bug 修复**
|
||
- 侧边栏高亮跟随标签切换同步更新
|
||
- 侧边栏始终可见（不因无文件而隐藏）
|
||
- 保存/另存为后侧边栏正确刷新
|
||
- 关闭标签后侧边栏高亮自动清除
|
||
|
||
**重构**
|
||
- renderer.js（1664行）拆分为 6 个模块：core / tabs / editor / search / sidebar / markdown
|
||
- 删除重复的 formatFileSize 函数
|
||
|
||
### v1.2.0
|
||
|
||
- 搜索替换（Ctrl+F / Ctrl+H，高亮、正则、大小写）
|
||
- 文件树侧边栏（打开文件夹、目录树浏览、自动刷新）
|
||
|
||
### v1.1.0
|
||
|
||
- 多标签页支持
|
||
- 暗色主题
|
||
- 文件监听与外部修改提示
|
||
- 未保存提醒
|
||
- 滚动同步
|
||
|
||
### v1.0.0
|
||
|
||
- 初始版本：Markdown 编辑与实时预览
|
||
|
||
---
|
||
|
||
## 📄 许可证
|
||
|
||
[MIT License](LICENSE) © 2026 [thzxx](https://gitee.com/thzxx)
|
||
|
||
---
|
||
|
||
<p align="center">
|
||
如果觉得有用，请点个 ⭐ Star 支持一下！
|
||
</p>
|