A Markdown reader for your phone — pure front-end, zero backend, works offline.
手机上的 Markdown 阅读器 —— 纯前端、零后端、支持离线
🌐 Web 版 · Web App · ⬇️ 下载 APK · Download APK · 📖 中文文档 · 📖 English Docs
A mobile-first Markdown reader that runs entirely in your browser or as a native
Android app. Pick .md files (or a whole folder) and read them with proper typography,
syntax highlighting, themes, and offline support. Nothing is ever uploaded —
documents and images stay in your device's IndexedDB.
一个手机优先的 Markdown 阅读器，既可当网页用，也能装成安卓 App。
选择 .md 文件（或整个文件夹）即可阅读，支持规范排版、代码高亮、多主题与离线。
所有内容都不上传，文档和图片只存在你本机的 IndexedDB 里。
| 方式 | 地址 | 说明 |
|---|---|---|
| Web / PWA | https://hui139.github.io/md-reader/ | 手机浏览器打开，可「添加到主屏幕」当 App 用 |
| Android APK | Releases | 下载 .apk 直接安装 |
git clone https://github.com/hui139/md-reader.git
cd md-reader
npm install
npm run dev # 手机连同一 Wi-Fi，打开终端打印的 Network 地址npm run build # Web / PWA -> dist/
npm run apk:release # Android APK -> android/app/build/outputs/| Feature | 说明 |
|---|---|
| 📂 Open local files | 选择本机 .md 文件，支持多选 |
| 🗂️ Import a folder | 保留子目录结构；Chrome/Edge 用系统目录选择器 |
| 🖼️ Local images work | 导入文件夹时一并读入图片，自动解析 md 中的相对路径 |
| 📝 Full GFM | 表格、任务列表、删除线、自动链接 |
| 🎨 8 themes × light/dark | 经典 / 海洋 / 森林 / 日落 / 薰衣草 / 极简 / 北境 / 樱花 |
| 🌏 4 interface languages | 中文 / English / 日本語 / 한국어 |
| 💻 Syntax highlighting | highlight.js，代码块可一键复制 |
| 📑 Table of contents | 右上角 ≣ 打开大纲，滚动时高亮当前章节 |
| 📶 Offline | Service Worker + IndexedDB，断网可用 |
| 📱 Installable | 添加到主屏幕，全屏无浏览器地址栏 |
| 🔒 Private | 零后端，文档与图片全部留在本机 |
8 color palettes × light/dark = 16 combinations, all meeting WCAG AAA body-text contrast (measured 10.84:1 – 17.72:1).
| 经典 Classic | 海洋 Ocean | 森林 Forest | 日落 Sunset |
|---|---|---|---|
#1f6feb |
#0e7490 |
#15803d |
#ea580c |
| 薰衣草 Lavender | 极简 Mono | 北境 Nord | 樱花 Sakura |
#7c3aed |
#3f3f46 |
#5e81ac |
#db2777 |
首次打开会让你选择界面语言（四种语言并列显示）。 界面语言只影响软件自身文案，完全不影响你阅读的 md 文件内容 —— 中文文档在日语界面下依然显示中文。
Interface language only affects the app's own UI. Your documents are never translated or altered.
| Reading · 阅读 | Dark · 深色 | Language gate · 语言选择 |
|---|---|---|
 |
 |
 |
| Ocean · 海洋 | Sakura · 樱花 | Table of contents · 目录 |
|---|---|---|
 |
 |
 |
| 层 | 选型 |
|---|---|
| 框架 | React 19 + TypeScript |
| 构建 | Vite 6 |
| Markdown | marked + highlight.js + DOMPurify |
| 持久化 | IndexedDB（手写封装，无依赖） |
| PWA | vite-plugin-pwa（Workbox） |
| 原生壳 | Capacitor 6 |
依赖很少：运行时依赖只有 5 个，IndexedDB 封装是手写的。
├── index.html
├── vite.config.ts 构建配置（Web / Pages / Android 三种目标）
├── capacitor.config.ts Capacitor 原生壳配置
├── src/
│ ├── App.tsx 主组件：状态、导入、抽屉
│ ├── styles.css 8 款主题 × 明暗的全部变量
│ ├── components/ 阅读区 / 列表 / 目录 / 设置 / 语言引导
│ └── lib/
│ ├── markdown.ts 渲染管线（marked + hljs + DOMPurify）
│ ├── import.ts 文件/文件夹导入（含图片收集）
│ ├── resolve.ts 图片相对路径解析
│ ├── db.ts IndexedDB（docs / assets / blobs）
│ ├── i18n.ts 四语言词典
│ └── theme.ts 主题定义
├── android/ Capacitor 生成的安卓工程
├── example-docs/ 测试文档集（可直接导入试用）
└── scripts/ 构建与验证脚本
npm install
npm run dev # 开发服务器（--host，手机可访问）
npm run build # Web 构建
npm run preview # 预览构建结果
npx tsc -b # 只做类型检查
npm run apk:debug # 打调试 APK
npm run apk:release # 打签名 APK
npm run aab:release # 打 AAB
npm run sign:info # 查看签名配置项目带 9 套共 197 项基于真实 Chrome 的自动化检查，覆盖渲染、XSS 消毒、 布局、颜色对比度、触摸目标尺寸、图片加载、多语言与多主题。
npm run build && npm run preview # 另开终端
node scripts/verify-render.mjs # 渲染管线 + XSS
node scripts/verify-example-docs.mjs # 测试文档集校验（无需浏览器）
TEST_URL=http://127.0.0.1:4173/ node scripts/verify-ui.mjs
TEST_URL=http://127.0.0.1:4173/ node scripts/verify-visual.mjs
TEST_URL=http://127.0.0.1:4173/ node scripts/verify-images.mjs
TEST_URL=http://127.0.0.1:4173/ node scripts/verify-i18n-theme.mjs详见 CONTRIBUTING.md。
打包成原生 App 用的是 Capacitor 6，同一套代码同时产出网页与安卓包。
npm run apk:release
# -> android/app/build/outputs/apk/release/app-release.apk环境要求：JDK 17+、Android SDK Platform 35。详见 android/keystore/README.md。
⚠️ 签名密钥务必自行生成并备份。 丢失后无法为老用户发布更新。 仓库中不含任何密钥。
- 零后端，没有任何服务器、埋点或统计
- 文档与图片全部存在浏览器 IndexedDB 中
- 不联网也能完整使用
- 渲染经过 DOMPurify 消毒，打开来源不明的 md 不会执行脚本
MIT © 2025 hui139
如果这个项目对你有帮助，欢迎点个 ⭐ Star