Markdown学习网站

一个现代化的、交互式的Markdown学习平台，帮助用户快速掌握Markdown语法。项目采用React和Material-UI构建，提供实时预览和丰富的教程示例。

功能特点

• 🚀 实时预览 - 即时查看Markdown渲染效果
• 📝 交互式教程 - 包含多个Markdown语法示例和练习
• 🎨 暗色/亮色主题 - 支持主题切换，保护眼睛
• 💾 自动保存 - 自动保存编辑内容和主题偏好
• 📱 响应式设计 - 完美支持桌面和移动设备
• 🎯 快捷工具栏 - 一键插入常用Markdown语法

项目预览图

技术栈

• React 19 - 用户界面构建
• Vite 6 - 现代化构建工具
• Material-UI 6 - UI组件库
• markdown-it - Markdown解析引擎

快速开始

确保你的开发环境中已安装 Node.js (推荐 v18 或更高版本)。

1. 克隆项目

git clone https://github.com/Qcaid/Learn_MarkDown.git
cd markdown-learning-site

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 构建项目

npm run build

使用说明

基本使用

1. 在左侧编辑器中输入或粘贴Markdown文本
2. 右侧窗口实时显示渲染效果
3. 使用顶部工具栏按钮快速插入常用Markdown语法
4. 点击右上角「教程」按钮查看语法示例和说明
5. 使用主题切换按钮在暗色/亮色模式间切换

特色功能

• 语法示例 - 提供10个常用Markdown语法示例
• 一键插入 - 支持快速插入标题、列表、代码块等元素
• 自动保存 - 编辑内容和主题偏好自动保存到本地
• 响应式布局 - 自适应各种屏幕尺寸

项目结构

├── src/
│   ├── App.jsx      # 主应用组件
│   ├── main.jsx     # 应用入口
│   └── assets/      # 静态资源
├── public/          # 公共资源
├── index.html       # HTML模板
└── package.json     # 项目配置

贡献指南

欢迎所有形式的贡献，无论是新功能、bug修复还是文档改进！

1. Fork 本仓库
2. 创建特性分支：git checkout -b feature/your-feature
3. 提交更改：git commit -m 'Add some feature'
4. 推送分支：git push origin feature/your-feature
5. 提交 Pull Request

开发指南

• 遵循项目现有的代码风格
• 添加必要的注释和文档
• 确保代码通过 ESLint 检查
• 编写清晰的提交信息

开源协议

本项目采用 MIT 协议。欢迎自由使用、修改和分发。

联系方式

如有问题或建议，欢迎：

• 提交 Issue
• 发起 Pull Request

致谢

感谢所有贡献者对项目的支持！