📝 Markdown 查看器 - 现代化的文档预览工具
一个基于 React 19 + TypeScript 构建的现代化 Markdown 文档查看器，支持实时预览、语法高亮、数学公式渲染等功能。
在微信或浏览器上打开此编辑器，上传你的md文档可以上课偷偷看自己写的博客哈哈，这个是我解决微信这个没有md预览的痛点，自己用ai搞了一个小工具出来，效果还不错，还有图片可以借助图床工具：图床 - 简单、快速、免费的图床把自己图片上传到这里，就不会导致路径问题了。
项目概述
项目背景
在日常开发和写作中，我们经常需要预览 Markdown 文档的渲染效果。虽然市面上有很多 Markdown 编辑器，但大多数要么功能过于复杂，要么界面不够现代化。因此，我开发了这个轻量级、功能完整的 Markdown 查看器。
核心特性
- 现代化 UI 设计 - 基于 Tailwind CSS 的响应式设计
- 多主题支持 - 亮色/暗色/护眼模式，适应不同使用场景
- 完美适配移动端 - 响应式布局，手机平板都能完美使用
- 强大的 Markdown 渲染 - 支持 GFM、数学公式、代码高亮
- 智能本地存储 - 自动保存文档，刷新不丢失
- 极速加载体验 - 优化的构建配置，秒开应用
技术架构
前端技术栈
1React 19.1.1 # 最新的 React 版本，性能更优 2TypeScript 5.9.3 # 类型安全，开发体验更好 3Vite (Rolldown) # 下一代构建工具，构建速度极快 4Tailwind CSS 3.4.10 # 原子化 CSS 框架 5
核心依赖
1react-markdown 9.0.1 # Markdown 渲染引擎 2highlight.js 11.9.0 # 代码语法高亮 3katex 0.16.9 # 数学公式渲染 4lucide-react 0.400.0 # 现代化图标库 5
项目结构
1src/ 2├── components/ # 组件目录 3│ ├── Header.tsx # 顶部导航栏 4│ ├── Sidebar.tsx # 侧边栏文件管理 5│ └── MainContent.tsx # 主内容区域 6├── stores/ # 状态管理 7│ └── useAppStore.ts # Zustand 全局状态 8├── utils/ # 工具函数 9│ ├── api.ts # API 接口 10│ ├── cache.ts # 缓存管理 11│ └── markdown.ts # Markdown 处理 12└── types/ # TypeScript 类型定义 13 └── index.ts 14
项目地址: github.com/ac666666666…
在线预览: http://129.204.12.129:9080/
pc端：
移动端：
如果这个项目对你有帮助，欢迎 Star ⭐ 支持！
《想偷卷？但微信不支持md文档？这个软件助你！》 是转载文章，点击查看原文。
