想偷卷?但微信不支持md文档?这个软件助你!

📝 Markdown 查看器 - 现代化的文档预览工具

一个基于 React 19 + TypeScript 构建的现代化 Markdown 文档查看器,支持实时预览、语法高亮、数学公式渲染等功能。

在微信或浏览器上打开此编辑器,上传你的md文档可以上课偷偷看自己写的博客哈哈,这个是我解决微信这个没有md预览的痛点,自己用ai搞了一个小工具出来,效果还不错,还有图片可以借助图床工具:图床 - 简单、快速、免费的图床把自己图片上传到这里,就不会导致路径问题了。

项目概述

项目背景

在日常开发和写作中,我们经常需要预览 Markdown 文档的渲染效果。虽然市面上有很多 Markdown 编辑器,但大多数要么功能过于复杂,要么界面不够现代化。因此,我开发了这个轻量级、功能完整的 Markdown 查看器。

核心特性

  • 现代化 UI 设计 - 基于 Tailwind CSS 的响应式设计
  • 多主题支持 - 亮色/暗色/护眼模式,适应不同使用场景
  • 完美适配移动端 - 响应式布局,手机平板都能完美使用
  • 强大的 Markdown 渲染 - 支持 GFM、数学公式、代码高亮
  • 智能本地存储 - 自动保存文档,刷新不丢失
  • 极速加载体验 - 优化的构建配置,秒开应用

技术架构

前端技术栈

bash 复制代码
React 19.1.1          # 最新的 React 版本,性能更优
TypeScript 5.9.3      # 类型安全,开发体验更好
Vite (Rolldown)       # 下一代构建工具,构建速度极快
Tailwind CSS 3.4.10   # 原子化 CSS 框架

核心依赖

bash 复制代码
react-markdown 9.0.1   # Markdown 渲染引擎
highlight.js 11.9.0    # 代码语法高亮
katex 0.16.9          # 数学公式渲染
lucide-react 0.400.0  # 现代化图标库

项目结构

bash 复制代码
src/
├── components/        # 组件目录
│   ├── Header.tsx    # 顶部导航栏
│   ├── Sidebar.tsx   # 侧边栏文件管理
│   └── MainContent.tsx # 主内容区域
├── stores/           # 状态管理
│   └── useAppStore.ts # Zustand 全局状态
├── utils/            # 工具函数
│   ├── api.ts       # API 接口
│   ├── cache.ts     # 缓存管理
│   └── markdown.ts  # Markdown 处理
└── types/            # TypeScript 类型定义
    └── index.ts

项目地址 : github.com/ac666666666...
在线预览 : http://129.204.12.129:9080/

pc端:

移动端:

如果这个项目对你有帮助,欢迎 Star ⭐ 支持!

相关推荐
计算机魔术师4 分钟前
OpenAI 回应智能体接管德语维基网站事件,称将改革 AI 误对齐事件披露机制
前端
晴天1615 分钟前
PWA 让网页拥有原生应用的体验
前端·pwa
雪芽蓝域zzs16 分钟前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
smileNicky41 分钟前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript
Csvn42 分钟前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师43 分钟前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
yume_sibai1 小时前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
雪芽蓝域zzs1 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
IT_陈寒1 小时前
Java字符串判等踩坑记:==和equals真的不能乱用
前端·人工智能·后端
shmily麻瓜小菜鸡1 小时前
JavaScript / TypeScript 易踩坑知识点 —— 作用域与变量类
开发语言·javascript·typescript