# markdown-reader

**Repository Path**: liugs000/markdown-reader

## Basic Information

- **Project Name**: markdown-reader
- **Description**: 简牍，一个零依赖、离线可用**的本地 Markdown 阅读与编辑工具。整个应用打包为单个 HTML 文件，双击即可在浏览器中使用——无需安装、无需服务器、无需联网。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-08-19
- **Last Updated**: 2026-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简牍 · 单文件 Markdown 阅读器/编辑器

一个**零依赖、离线可用**的本地 Markdown 阅读与编辑工具。整个应用打包为**单个 HTML 文件**，双击即可在浏览器中使用——无需安装、无需服务器、无需联网。

## 使用

1. 双击打开 `dist/markdown-reader.html`（用 Chrome / Edge，推荐；Firefox 可用只读模式）。
2. 三种方式开始阅读：
   - **打开文件夹**（Chrome/Edge）：浏览整个目录，文件树导航，编辑后 `Ctrl+S` 直接写回原文件；
   - **打开文件**：选择一个或多个 Markdown 文件；
   - **拖拽**：把 `.md` 文件或整个文件夹拖进窗口（所有浏览器可用，只读，保存时导出副本）。
3. 顶栏切换 **阅读 / 编辑 / 分屏** 三种模式，一键切换亮/暗主题。

## 功能

- 完整 GFM 渲染：表格、任务列表、脚注、删除线、围栏代码块
- 代码高亮（highlight.js，40+ 语言），代码块一键复制
- 本地相对路径图片自动显示；文档间相对链接点击跳转
- Markdown 编辑器（CodeMirror 6）：语法高亮、行号、查找替换、撤销历史
- 右侧标题大纲（阅读位置跟随高亮）+ 阅读进度条
- 文件夹内**全文搜索**（Ctrl+Shift+F），结果点击跳转到对应行
- 多标签页、未保存标记、新建文档、目录重新扫描
- UTF-8 / GB18030 中文编码自动识别
- 记住主题、布局、分屏比例等偏好（localStorage）

## 快捷键

| 快捷键 | 功能 |
| --- | --- |
| `Ctrl+S` | 保存 |
| `Ctrl+Shift+F` | 全文搜索 |
| `Ctrl+F` | 编辑器内查找替换 |
| `Ctrl+1` / `Ctrl+2` / `Ctrl+3` | 阅读 / 编辑 / 分屏 |
| `Ctrl+B` | 文件树开合 |
| `Ctrl+Shift+D` | 亮/暗主题 |
| `Ctrl+O` | 打开文件夹 |
| `Esc` | 关闭搜索等浮层 |

## 浏览器支持

| 能力 | Chrome / Edge | Firefox / Safari |
| --- | --- | --- |
| 打开文件夹（文件树） | ✓ 读写 | ✗ |
| 打开文件选择器 | ✓ | ✗ |
| 拖拽文件/文件夹 | ✓（只读） | ✓（只读） |
| 保存回原文件 | ✓ | 导出副本 |

## 开发

```bash
npm install            # 安装依赖
npm run build          # 构建单文件 → dist/markdown-reader.html
npm run watch          # 监视 src/ 与 template.html 自动重建
node test/renderer.test.mjs   # 渲染管线单元测试
node test/smoke.mjs           # 端到端冒烟测试（需要本机 Chrome/Edge）
node test/visual-check.mjs    # 视觉实现验证（需要本机 Chrome/Edge）
```

构建使用 rollup + terser（纯 JS、进程内运行，不依赖本机二进制）。

## 目录结构

```
markdown-reader/
├── template.html          # 单文件模板（样式/脚本占位）
├── build.mjs              # 构建脚本（rollup 打包 + 内联）
├── src/
│   ├── main.js            # 应用主控（UI 编排、快捷键、拖拽）
│   ├── fs-layer.js        # 文件访问抽象（File System Access / 拖拽 / 编码）
│   ├── renderer.js        # markdown-it 渲染管线
│   ├── editor.js          # CodeMirror 6 编辑器封装
│   ├── icons.js           # 内联 SVG 图标
│   ├── utils.js           # 工具、Toast、模态框
│   ├── styles.css         # 全部样式（编辑部/印刷美学，亮暗双主题）
│   └── ui/                # 侧栏文件树、大纲、全文搜索
├── test/                  # 单元测试 + E2E 冒烟测试 + 视觉验证
└── dist/
    └── markdown-reader.html   # 交付产物（单文件）
```