一个功能强大的纯前端 Markdown 转 HTML 转换器，无需后端服务，支持实时预览、主题切换、目录生成和打印优化。
- ✅ 无需后端：所有功能都在浏览器中完成
- ✅ 本地处理：文件读取和转换完全在客户端
- ✅ 离线可用：构建后可以完全离线使用
- ✅ 隐私安全：文件不会上传到任何服务器
- ✅ 即开即用：打开网页即可使用，无需安装
- 实时预览：输入 Markdown 内容，实时查看 HTML 效果
- 本地文件读取：支持拖拽上传 .md 文件（纯客户端处理）
- 文件下载：生成自包含的 HTML 文件（无需服务器）
- 智能命名：根据文档内容自动生成文件名
- 亮色主题：适合白天使用
- 暗色主题：适合夜间使用
- 自动模式：跟随系统主题设置
- 本地存储：记住用户的主题偏好
- 自动生成：扫描文档标题，生成层级化目录
- 点击跳转：点击目录项快速跳转到对应位置
- 滚动高亮：滚动时自动高亮当前阅读位置
- 折叠展开：支持目录的折叠和展开
- 专业样式：优化的打印 CSS 样式
- 智能分页：避免内容被截断
- 黑白适配：节省墨水的配色方案
- 字体优化：适合纸质阅读的字体设置
- 用户友好：清晰的错误提示信息
- 状态反馈：实时的操作状态指示
- 重试机制：支持操作重试
- 详细日志：开发者友好的错误详情
无需安装任何依赖，直接将项目文件上传到 HTTP 服务器即可使用：
- 下载项目文件
- 上传到服务器：将所有文件上传到 Web 服务器目录
- 访问网站：打开浏览器访问
index.html
如果需要在本地测试，可以使用简单的 HTTP 服务器：
# 使用 Python
python -m http.server 8000
# 使用 Node.js
npx serve .
# 使用 PHP
php -S localhost:8000然后访问 http://localhost:8000 或 http://localhost:8000/test.html（测试页面）
如果需要进行开发或测试：
# 安装依赖（仅用于开发和测试）
npm install
# 开发模式
npm run dev
# 运行测试
npm test项目已经是纯静态文件，可以直接部署：
1. 直接上传（最简单）
- 将项目所有文件上传到 Web 服务器
- 确保
index.html可以被访问 - 无需任何构建步骤
2. GitHub Pages
- 将代码推送到 GitHub 仓库
- 在设置中启用 GitHub Pages
- 选择主分支作为源
3. Netlify
- 拖拽项目文件夹到 Netlify
- 或连接 GitHub 仓库（无需构建命令）
4. Vercel
- 导入 GitHub 仓库
- 设置为静态网站（无需构建）
5. 任何 Web 服务器
- Apache、Nginx、IIS 等
- 直接复制文件到网站根目录
-
输入内容：
- 在左侧面板直接输入 Markdown 内容
- 或点击"上传 .md 文件"按钮选择文件
- 支持拖拽文件到上传区域
-
实时预览：
- 右侧面板会实时显示转换后的 HTML 效果
- 支持所有标准 Markdown 语法
-
主题切换：
- 点击右上角的主题按钮
- 循环切换：自动 → 亮色 → 暗色
-
目录导航：
- 点击"目录"按钮显示文档结构
- 点击目录项快速跳转
- 滚动时自动高亮当前位置
-
导出文件：
- 点击"下载 HTML"生成自包含文件
- 点击"打印"打开打印预览
- 标题：
# H1## H2### H3等 - 段落：普通文本段落
- 强调：
**粗体***斜体* - 列表：有序列表和无序列表
- 链接：
[文本](URL) - 图片：
 - 代码：
`行内代码`和代码块 - 引用：
> 引用内容 - 表格：标准 Markdown 表格语法
- 水平线：
---
md2page/
├── src/
│ ├── core/ # 核心功能类
│ │ ├── MarkdownConverter.js # Markdown 转换器
│ │ ├── FileHandler.js # 文件处理器
│ │ ├── ThemeManager.js # 主题管理器
│ │ ├── TOCGenerator.js # 目录生成器
│ │ └── PrintOptimizer.js # 打印优化器
│ ├── components/ # UI 组件
│ │ ├── InputPanel.js # 输入面板
│ │ ├── PreviewPanel.js # 预览面板
│ │ ├── TableOfContents.js # 目录组件
│ │ ├── ThemeToggle.js # 主题切换按钮
│ │ ├── FileUpload.js # 文件上传组件
│ │ └── ErrorHandler.js # 错误处理组件
│ ├── styles/ # 样式文件
│ │ ├── main.css # 主样式
│ │ ├── themes.css # 主题样式
│ │ └── print.css # 打印样式
│ └── main.js # 主入口文件
├── tests/ # 测试文件
├── public/ # 静态资源
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── README.md # 项目说明
项目包含完整的单元测试和集成测试：
# 运行所有测试
npm test
# 运行测试并查看覆盖率
npm run test:coverage
# 运行测试 UI
npm run test:ui测试覆盖的功能：
- Markdown 转换功能
- 文件处理功能
- 主题管理功能
- 目录生成功能
- 错误处理功能
- 集成测试
- 防抖处理：输入时使用 300ms 防抖，避免频繁更新
- 懒加载：按需加载功能模块
- 缓存机制：缓存解析结果和主题设置
- 虚拟滚动：大文档的高效滚动处理
- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)
- 桌面端：双栏布局，支持面板大小调整
- 平板端：可折叠侧边栏
- 移动端：单栏布局，标签切换模式
欢迎贡献代码！请遵循以下步骤：
- Fork 项目
- 创建功能分支：
git checkout -b feature/new-feature - 提交更改：
git commit -am 'Add new feature' - 推送分支：
git push origin feature/new-feature - 提交 Pull Request
- 使用 ES6+ 语法
- 遵循模块化设计原则
- 编写单元测试
- 添加适当的注释
- 保持代码风格一致
MIT License - 详见 LICENSE 文件
md2page - 让 Markdown 转换更简单、更强大！