MetonaTeam/MarkLite
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

更新 README.md 和 DESIGN.md：多标签页、暗色主题、文件监听等 v1.1.0 功能

Browse Source
This commit is contained in:
thzxx
2026-05-18 13:35:23 +08:00
parent 5ff89edd2b
commit fe478edfde
2 changed files with 113 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+42 -34
View File
@@ -5,19 +5,19 @@
<h1 align="center">MarkLite</h1>
<p align="center">
<strong>轻量级 Windows 本地 Markdown 阅读器</strong>
<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.0.0-orange?style=flat-square" alt="Version">
<img src="https://img.shields.io/badge/Version-1.1.0-orange?style=flat-square" alt="Version">
</p>
<p align="center">
基于 Electron 构建，开箱即用的 Markdown 桌面阅读器。<br>
支持实时预览、代码高亮、拖拽打开，界面简洁现代。
基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。<br>
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开。
</p>
---
@@ -26,39 +26,43 @@
| 功能 | 说明 |
|------|------|
| 📂 **文件打开** | 菜单打开 / 拖拽打开 / 文件关联（双击 .md） |
| 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab 切换 |
| 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） |
| ✏️ **实时编辑** | 左侧编辑器，支持 Tab 缩进、行号显示、光标位置 |
| 👁 **实时预览** | 右侧预览面板，编辑即渲染，滚动同步 |
| 🔤 **代码高亮** | 基于 highlight.js，支持 180+ 种编程语言语法高亮 |
| 🎨 **三种视图** | 分屏模式 / 纯编辑 / 纯预览，自由切换 |
| 📐 **分屏调节** | 拖拽中间分隔条，自由调整编辑区与预览区比例 |
| 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆 |
| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载 |
| 💾 **文件保存** | 保存 / 另存为，支持 .md 和 .txt 格式 |
| ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 |
| 🖥️ **原生菜单** | 文件、视图、帮助菜单，符合桌面应用习惯 |
| 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 |
## 📸 界面预览
```
┌──────────────────────────────────────────────────────────┐
│ 📄 MarkLite - README.md ─ □ ✕ │
├──────────────────────────────────────────────────────────┤
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │
├────────────────────────┬─────────────────────────────────┤
│ │ │
│ 1 # MarkLite │ MarkLite │
│ 2 │ ───────────── │
│ 3 一款轻量级的... │ │
│ 4 │ 一款轻量级的 Windows 本地 │
│ 5 ## 功能特性 │ Markdown 阅读器桌面应用... │
│ 6 │ │
│ 7 - 📝 实时编辑 │ ■ 实时编辑 │
│ 8 - 👁 实时预览 │ ■ 实时预览 │
│ 9 - 🔤 代码高亮 │ ■ 代码高亮 │
│ │ │
├────────────────────────┴─────────────────────────────────┤
│ README.md │ UTF-8 │ Markdown │ 行 9, 列 12 │
└──────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ MarkLite - README.md ─ □ ✕ │
├──────────────────────────────────────────────────────────────────┤
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
├──────────────────────────────────────────────────────────────────┤
│ [README.md] [DESIGN.md] [main.js] [+] │
├────────────────────────────┬─────────────────────────────────────┤
│ │ │
│ 1 # MarkLite │ MarkLite │
│ 2 │ ───────────── │
│ 3 一款轻量级的... │ │
│ 4 │ 一款轻量级的 Windows 本地 │
│ 5 ## 功能特性 │ Markdown 编辑器桌面应用... │
│ 6 │ │
│ 7 - 📝 实时编辑 │ ■ 实时编辑 │
│ 8 - 👁 实时预览 │ ■ 实时预览 │
│ 9 - 🔤 代码高亮 │ ■ 代码高亮 │
│ │ │
├────────────────────────────┴─────────────────────────────────────┤
│ README.md │ UTF-8 │ Markdown │ 2.1 KB │ 行 9, 列 12 │
└──────────────────────────────────────────────────────────────────┘
```
## 🚀 快速开始
@@ -93,20 +97,22 @@ npm run build
npm run build:portable
```
打包完成后，安装包位于 `dist/` 目录。
打包完成后，安装包位于 `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` | 纯预览模式 |
| `F12` | 开发者工具 |
| `Ctrl + R` | 重新加载 |
## 🛠️ 技术栈
@@ -123,12 +129,12 @@ npm run build:portable
```
MarkLite/
├── package.json # 项目配置 & electron-builder 打包配置
├── main.js # Electron 主进程（窗口、菜单、文件系统）
├── main.js # Electron 主进程（窗口、文件系统、IPC）
├── preload.js # 预加载脚本（安全 IPC 桥接）
├── renderer/
│ ├── index.html # 主页面结构
│ ├── style.css # UI 样式（现代简洁设计）
│ └── renderer.js # 渲染进程逻辑（编辑、预览、拖拽）
│ ├── style.css # UI 样式（亮色/暗色主题）
│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览）
├── lib/
│ ├── marked.min.js # marked.js（本地离线）
│ ├── highlight.min.js # highlight.js（本地离线）
@@ -136,6 +142,7 @@ MarkLite/
├── assets/
│ └── icon.ico # 应用图标（多尺寸）
├── DESIGN.md # 架构设计文档
├── DEVSETUP.md # 开发环境配置指南
├── LICENSE # MIT 许可证
└── README.md # 项目说明
```
@@ -145,7 +152,7 @@ MarkLite/
```
┌─────────────────────────────────────┐
│ Main Process (main.js) │
│ 窗口管理 · 文件系统 · 原生菜单 · IPC │
│ 窗口管理 · 文件系统 · 文件监听 · IPC │
└──────────────┬──────────────────────┘
│ contextBridge (安全隔离)
┌──────────────▼──────────────────────┐
@@ -155,11 +162,12 @@ MarkLite/
│
┌──────────────▼──────────────────────┐
│ Renderer Process (renderer/) │
│ UI 渲染 · 编辑器 · 预览 · 拖拽 · 快捷键 │
│ 标签页 · 编辑器 · 预览 · 暗色主题 │
│ 拖拽 · 快捷键 · localStorage │
└─────────────────────────────────────┘
```
> 安全策略：`contextIsolation: true` + `nodeIntegration: false`，渲染进程无法直接访问 Node.js API。
> 安全策略：`contextIsolation: true` + `nodeIntegration: false` + CSP，渲染进程无法直接访问 Node.js API。
## 📝 支持的 Markdown 语法