news 2026/6/26 10:57:21

auri 2 + React 19 实战:如何用AI从零构建一个极致轻量的Markdown阅读器

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
auri 2 + React 19 实战:如何用AI从零构建一个极致轻量的Markdown阅读器

阅读预警:本文不是硬核教程,而是一个普通用户被工具折磨后的“自救实录”。如果你只想找工具,请拉到文末有下载;如果你想知道“不懂代码怎么做软件”,请花5分钟读完。

01. 一个Markdown重度用户的“阅读焦虑”

我大概算是Markdown的“骨灰级”用户了。从日常笔记、博客草稿,到项目文档、视频脚本,几乎所有文字产出都依赖它。

但很诡异的是:写了这么多年Markdown,我居然找不到一个舒服的“纯阅读”工具。

这不是矫情,是真实的痛点:

常用工具作为“阅读器”的致命伤
VS Code启动像开坦克,内存占用高,满屏按钮和侧边栏,读个文档像在调试代码
Obsidian知识管理神器,但只为“看一眼md文件”而启动它?太重了,插件加载慢得让人想砸键盘
QuickLook空格预览虽快,但大文件直接卡死,没主题、不记进度,只能当“临时瞄一眼”用

市面上的工具要么太重,要么太简陋。我就想要一个东西:打开即读,读完即走,专注到只剩文字本身。

找了一圈没有,我决定自己做一个。

更疯狂的是,我一行代码都不会写。


02. 4MB的执念:ErgeMD 诞生记

所有人都说做软件必须学编程,但我偏不信这个邪。AI时代了,如果连个桌面应用都搓不出来,那AI还有什么意义?

于是,ErgeMD诞生了。

VS Code 150MB,Obsidian 282MB,它的安装包只有主流工具的 1/37 ~ 1/70。

这不是阉割版,而是架构精简的结果:

  • ⚡️毫秒级启动:便携版EXE双击秒开,不写注册表,U盘拷走就能用
  • 📂原生体验:安装版支持右键菜单关联,双击md文件直接打开
  • 💰完全免费:无广告、无订阅、无联网验证

技术栈选的是Tauri 2 + React 19 + Rust后端。为什么选这套?因为AI告诉我这是目前兼顾体积与性能的最优解。我不懂Rust,但AI懂,这就够了。


03. 那些AI帮我啃下的“硬骨头”

很多人觉得AI写代码就是生成个Hello World,但在真实项目中,坑远比想象中多。分享两个让我印象最深的细节,也是ErgeMD区别于其他工具的核心体验。

🎨 主题不是换个色值那么简单

内置14套主题(Aurora、Cyberpunk、Tokyo Night等),每一套都经过OKLCH色彩空间校正

💡什么是OKLCH?
简单说,传统RGB调色容易出现“某个颜色刺眼、另一个颜色灰暗”的问题。OKLCH基于人眼感知均匀分布亮度,确保无论切到哪个主题,文字的对比度和舒适度始终在线。

这套配色方案并非凭空捏造,而是基于开源项目falcon-vscode-themes改造的。我把原作者的样式喂给AI,让它用OKLCH重新映射优化。开源社区的审美 + AI的工程化能力 = 现代独立开发的新范式。

📊 Mermaid图表的“主题地狱”

Mermaid 11.14.0 支持20多种图表,但它的SVG渲染是隔离的,外部CSS根本注入不进去。

最开始我想当然地覆盖样式,结果切换主题时图表颜色乱成一锅粥。后来尝试传themeVariables,并发渲染又互相污染。

最终解法:AI帮我设计了一套全局串行渲染队列,配合80+个CSS变量的签名缓存机制。主题一变,缓存自动失效重绘。对于Packet、Wardley等beta阶段的新图表,还在渲染后做了SVG后处理,通过真实DOM操作注入scoped CSS。

现在,无论多复杂的架构图,切主题时都能保持风格统一。这些技术方案,全是我和AI一轮轮对话磨出来的,我负责描述现象,AI负责定位问题并给出代码。


04. 长文档阅读的“最后一公里”

经常看API文档或技术书稿的朋友应该懂:几千行的Markdown,普通工具滚到后面直接掉帧。

ErgeMD内置了三档虚拟滚动预设:

表格

档位触发行数适用场景
低档1000行起老旧设备 / 轻薄本
中档(默认)5000行起主流配置
高档15000行起高性能工作站

另外还有一个看似简单却极少有工具做好的功能:自动记忆阅读进度。下次打开同一个文件,光标直接回到上次离开的位置。QuickLook没有,很多编辑器也没有,但阅读场景下它就是刚需。

其他基础能力也没落下:悬浮TOC目录、GFM完整支持、KaTeX公式渲染、190+语言代码高亮、一键导出DOCX/PDF/HTML。该有的都有,不该有的一个不多。


05. 零代码开发的真相:你只需要当好“产品经理”

回到最初的问题:一行代码不会,怎么做到的?

答案很诚实:全部代码由AI生成,我用的是国产IDE Trae。

我的角色从头到尾只有四个:提需求、做测试、验收成果、决定方向。
AI的角色也只有一个:把模糊的想法变成可运行的代码。

为了验证渲染能力,我甚至让AI生成了一份包含所有Markdown语法和Mermaid图表类型的“极限测试文档”。这份文档现在成了我的回归测试标配,每次更新跑一遍就知道有没有翻车。

🎁福利时间
关注后回复「测试文档」,我把这份涵盖全语法的Markdown测试文件发你。不管你用什么阅读器,拿它测一遍就知道工具的上限在哪。

这个过程让我确信一件事:AI时代,创造工具的门槛已经从“会不会写代码”变成了“能不能清晰描述需求”。

你不需要懂Rust,不需要懂React,你只需要知道自己要什么,然后耐心地、反复地和AI沟通。

06. 写在最后

VS Code适合写代码,Obsidian适合建知识库,QuickLook适合快速预览。

但如果你只是想要一个“打开即读、读了即走”的Markdown阅读器,ErgeMD可能就是那个被忽略的答案。

专注阅读,回归本质。就这么简单。


📥 获取方式

ErgeMD 完全免费,无付费功能,无广告。

📥︎ 点击前往 更新发布页 >>
  • 便携版:单EXE文件,双击即用,适合放U盘
  • 安装版:支持右键菜单关联md文件
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/26 10:56:56

深入解析SMC UART模式:缓冲区描述符机制与高效串行通信实现

1. 串行管理控制器(SMC)与UART模式核心概念解析 在嵌入式系统开发,尤其是涉及工业控制、网络通信设备或复杂仪器仪表时,串行通信接口是连接处理器与外部世界最基础、最可靠的桥梁之一。我们常说的UART(通用异步收发传输…

作者头像 李华
网站建设 2026/6/26 10:56:28

MPC8560 ATM控制器缓冲区描述符与中断队列机制详解

1. MPC8560 ATM控制器内存结构深度解析 在嵌入式网络通信领域,尤其是在处理ATM这类对时序和可靠性要求极高的协议时,内存管理机制的设计直接决定了系统的吞吐量、延迟和稳定性。MPC8560 PowerQUICC III处理器集成的ATM控制器,其核心智慧就体现…

作者头像 李华
网站建设 2026/6/26 10:56:10

如何用Ice实现3个macOS菜单栏管理技巧:新手必读指南

如何用Ice实现3个macOS菜单栏管理技巧:新手必读指南 【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice 你是否曾经面对过拥挤杂乱的macOS菜单栏感到束手无策?那些不断增加的应用…

作者头像 李华
网站建设 2026/6/26 10:55:03

Alpaca-LoRA微调实战:消费级GPU跑通大模型指令微调

1. 项目概述:轻量级大模型微调,真正在你手头设备上跑起来“Alpaca-LoRA”这六个字母组合,最近两年在开源模型圈里出现的频率,几乎和“显存告急”“OOM Killed”一样高频。它不是某个神秘新模型,而是一套被验证过、踩过…

作者头像 李华
网站建设 2026/6/26 10:53:39

MPC860 AAL2微码实现:ATM适配层硬件加速与嵌入式通信协议栈优化

1. 项目概述与背景在嵌入式通信系统的开发中,尤其是在构建电信级的接入网关、无线基站控制器或综合业务接入设备时,我们常常需要处理一种名为ATM(异步传输模式)的底层传输技术。ATM的核心魅力在于其面向连接和固定长度信元&#x…

作者头像 李华
网站建设 2026/6/26 10:51:13

终极Markdown Viewer浏览器插件:三分钟安装+专业配置完整指南

终极Markdown Viewer浏览器插件:三分钟安装专业配置完整指南 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 还在为浏览器中无法优雅预览Markdown文件而烦恼吗&#x…

作者头像 李华