🎨 MD 文章渲染器：让 Markdown 写作拥有杂志级的排版体验
✨ 一款支持 13 种精选主题 的 Markdown 文章编写与排版工具，让你的文字从此与众不同！
🚀 还在为 Markdown 排版发愁？
写文章最痛苦的是什么？排版！
用纯 Markdown 写出来的文章千篇一律，缺乏个性。你想要的：
- ✅ 护眼的阅读体验
- ✅ 独特的视觉风格
- ✅ 一键复制到 Word 保留样式
现在，这一切都不是问题！
🎯 核心特性
🌈 13 种精选主题，总有一款适合你
| 主题 | 风格 | 适用场景 |
|---|---|---|
| 🌸 樱花 | 日式粉色，浪漫唯美 | 个人博客、生活随笔 |
| 🌲 森林 | 绿色自然，清新舒适 | 环保、科技、生活类 |
| 🌊 海洋 | 蓝色深邃，宁静大气 | 知识科普、投资理财 |
| ⚡ 赛博 | 霓虹发光，科幻未来 | 科技、游戏、电竞 |
| 📰 杂志 | 红黑大字体，视觉冲击 | 新闻、专题、爆款文 |
| 🍃 薄荷 | 清新绿白，简约时尚 | 时尚、设计、生活方式 |
| 📜 护眼 | 信纸横线格，久看不累 | 长文阅读、学术写作 |
| 💻 GitHub | 程序员风格，代码友好 | 技术博客、开发者文档 |
| 📝 学术 | 论文双线标题，规范严谨 | 论文、报告、正式文档 |
| ⌨️ 打字机 | 复古等宽字体，情怀满满 | 小说、回忆录、故事 |
| 🎯 极简 | 无装饰，留白为王 | 极简主义者 |
| 🌙 深色 | 暗色点阵，护眼必备 | 夜间写作、代码展示 |
| 💜 默认 | 紫蓝渐变，时尚大气 | 通用场景 |
👀 所见即所得的实时预览
左侧编写，右侧实时渲染，毫秒级响应，让你的灵感一气呵成！
📋 一键复制，样式无损
点击「复制富文本」按钮，粘贴到 Word、微信公众号编辑器、知乎等平台，完美保留样式！
💾 轻量存储，开箱即用
JSON 文件存储，无需安装 MySQL、PostgreSQL，下载即可使用。
🛠️ 技术栈
前端: Vue 3 + Vite + Pinia + markdown-it + Vue Router
后端: Express.js + UUID + CORS
架构简洁，代码清晰，前端与后端分离，方便二次开发！
📦 快速开始
1. 安装依赖
# 前端
cd frontend && npm install
# 后端
cd backend && npm install
2. 启动服务
# 终端 1 - 后端 (端口 9523)
cd backend && npm start
# 终端 2 - 前端 (端口 8523)
cd frontend && npm run dev
3. 开始创作
打开浏览器访问 http://localhost:8523
📂 项目结构
article_helper/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── Editor.vue # Markdown 编辑器
│ │ │ ├── Preview.vue # 实时预览
│ │ │ ├── ThemeSelector.vue # 主题选择器
│ │ │ └── ArticleList.vue # 文章列表
│ │ ├── views/
│ │ │ ├── Home.vue # 编辑页面
│ │ │ └── List.vue # 列表页面
│ │ ├── stores/ # Pinia 状态管理
│ │ ├── themes/ # 13 种主题 CSS
│ │ └── api/ # API 调用封装
│ └── vite.config.js
│
└── backend/
├── server.js # Express 服务入口
├── routes/ # CRUD API
└── data/ # JSON 存储
🔌 API 接口
| 方法 | 路径 | 描述 |
|---|---|---|
GET |
/api/articles |
获取文章列表 |
GET |
/api/articles/:id |
获取单篇文章 |
POST |
/api/articles |
创建文章 |
PUT |
/api/articles/:id |
更新文章 |
DELETE |
/api/articles/:id |
删除文章 |
💡 适用人群
- 📝 博主：需要多平台发布的写作者
- 📚 作者：追求排版美感的文字工作者
- 👨💻 开发者：需要编写技术文档的程序员
- 📖 学生：写论文、做笔记的同学们
- 🎨 设计师：需要快速原型排版的创意人
🌟 开源免费
本项目采用 MIT 开源协议，你可以：
- ✅ 自由使用于个人或商业项目
- ✅ 随意修改和定制
- ✅ 提交 Issue 和 Pull Request
- ✅ 学习参考 Vue 3 + Express.js 全栈开发
📢 立刻体验
还在等什么？立即克隆项目，开始你的多彩写作之旅！
git clone https://github.com/jiafeimao-gjf/article_helper.git
cd article_helper
💬 “好的排版让文字更有力量，让阅读成为一种享受。”
关注我们，获取更多开源项目资讯！
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1056615746@qq.com
