🪶 MarkLite

<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.0.0-orange?style=flat-square" alt="Version">
</p>

<p align="center">
  基于 Electron 构建，开箱即用的 Markdown 桌面阅读器。<br>
  支持实时预览、代码高亮、拖拽打开，界面简洁现代。
</p>

---

## ✨ 功能特性

| 功能 | 说明 |
|------|------|
| 📂 **文件打开** | 菜单打开 / 拖拽打开 / 文件关联（双击 .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 x64 NSIS 安装包
npm run build

# 打包为便携版（免安装）
npm run build:portable
```

打包完成后，安装包位于 `dist/` 目录。

## ⌨️ 快捷键

| 快捷键 | 功能 |
|:-------|:-----|
| `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              # 项目配置 & 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                 # 项目说明
```

## 🏗️ 架构设计

```
┌─────────────────────────────────────┐
│        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)

---

<p align="center">
  如果觉得有用，请点个 ⭐ Star 支持一下！
</p>