diff --git a/README.md b/README.md index c821a37..ca8675b 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,187 @@ -# MarkLite +

+ MarkLite +

-一款轻量级的 Windows 本地 Markdown 阅读器桌面应用程序。 +

MarkLite

-## 功能特性 +

+ 🪶 轻量级 Windows 本地 Markdown 阅读器 +

-- 📝 Markdown 文件打开与编辑 -- 👁 实时预览（编辑+预览 / 纯预览模式） -- 🎨 现代化简洁 UI 设计 -- 📂 支持拖拽打开文件 -- 💾 文件保存功能 -- 🔤 代码语法高亮 -- ⌨️ 快捷键支持 +

+ Platform + Electron + License + Version +

-## 技术栈 +

+ 基于 Electron 构建，开箱即用的 Markdown 桌面阅读器。
+ 支持实时预览、代码高亮、拖拽打开，界面简洁现代。 +

-- **Electron** - 桌面应用框架 -- **marked.js** - Markdown 解析 -- **highlight.js** - 代码高亮 -- **HTML + CSS + JavaScript** - 前端技术 +--- -## 开发 +## ✨ 功能特性 + +| 功能 | 说明 | +|------|------| +| 📂 **文件打开** | 菜单打开 / 拖拽打开 / 文件关联（双击 .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 │ +└──────────────────────────────────────────────────────────┘ +``` + +## 🚀 快速开始 + +### 环境要求 + +- **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 exe 安装包 +# 打包 Windows x64 NSIS 安装包 npm run build + +# 打包为便携版（免安装） +npm run build:portable ``` -## 快捷键 +打包完成后，安装包位于 `dist/` 目录。 + +## ⌨️ 快捷键 | 快捷键 | 功能 | -|--------|------| -| Ctrl+O | 打开文件 | -| Ctrl+S | 保存文件 | -| Ctrl+Shift+S | 另存为 | -| Ctrl+1 | 编辑+预览模式 | -| Ctrl+2 | 纯编辑模式 | -| Ctrl+3 | 纯预览模式 | +|:-------|:-----| +| `Ctrl + O` | 打开文件 | +| `Ctrl + S` | 保存文件 | +| `Ctrl + Shift + S` | 另存为 | +| `Ctrl + 1` | 编辑 + 预览（分屏） | +| `Ctrl + 2` | 纯编辑模式 | +| `Ctrl + 3` | 纯预览模式 | +| `F12` | 开发者工具 | +| `Ctrl + R` | 重新加载 | -## 项目结构 +## 🛠️ 技术栈 + +| 组件 | 技术 | 说明 | +|:-----|:-----|:-----| +| 桌面框架 | [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 # 项目配置 -├── main.js # Electron 主进程 -├── preload.js # 预加载脚本 -├── renderer/ # 渲染进程 -│ ├── index.html -│ ├── style.css -│ └── renderer.js -├── lib/ # 第三方库 -├── assets/ # 资源文件 -├── DESIGN.md # 设计文档 -└── README.md # 项目说明 +├── package.json # 项目配置 & electron-builder 打包配置 +├── main.js # Electron 主进程（窗口、菜单、文件系统） +├── 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 # 架构设计文档 +├── LICENSE # MIT 许可证 +└── README.md # 项目说明 ``` -## 许可证 +## 🏗️ 架构设计 -MIT +``` +┌─────────────────────────────────────┐ +│ Main Process (main.js) │ +│ 窗口管理 · 文件系统 · 原生菜单 · IPC │ +└──────────────┬──────────────────────┘ + │ contextBridge (安全隔离) +┌──────────────▼──────────────────────┐ +│ Preload Script (preload.js) │ +│ 安全 API 桥接层 │ +└──────────────┬──────────────────────┘ + │ +┌──────────────▼──────────────────────┐ +│ Renderer Process (renderer/) │ +│ UI 渲染 · 编辑器 · 预览 · 拖拽 · 快捷键 │ +└─────────────────────────────────────┘ +``` + +> 安全策略：`contextIsolation: true` + `nodeIntegration: false`，渲染进程无法直接访问 Node.js API。 + +## 📝 支持的 Markdown 语法 + +- ✅ 标题（h1 ~ h6） +- ✅ **粗体** / *斜体* / ~~删除线~~ +- ✅ 有序列表 / 无序列表 +- ✅ 任务列表 `- [x]` +- ✅ 代码块（围栏式 + 语法高亮） +- ✅ 行内代码 +- ✅ 链接 / 图片 +- ✅ 表格 +- ✅ 引用块 +- ✅ 水平线 +- ✅ HTML 内联元素 +- ✅ GFM（GitHub Flavored Markdown） + +## 📄 许可证 + +[MIT License](LICENSE) © 2026 [thzxx](https://gitee.com/thzxx) + +--- + +

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