MetonaTeam/MarkLite
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
2716a7d32059616c2debfb200ec00acece8da928
MarkLite/README.md
T

13 KiB
Raw Blame History

MarkLite

MarkLite

轻量级 Windows 本地 Markdown 编辑器

Platform Electron License Version

基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开 · 搜索替换 · 文件树。

✨ 功能特性

功能 说明
📑 多标签页 同时打开多个文件，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

安装与运行

# 克隆仓库
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 样式（亮色/暗色主题）
│   ├── 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 © 2026 thzxx

如果觉得有用，请点个 ⭐ Star 支持一下！

Reference in New Issue View Git Blame Copy Permalink