用 Cursor AI 打造 MD Cat:一个功能强大的 Markdown 编辑器
前言
最近用 Cursor AI 开发了一个 Markdown 编辑器 MD Cat,支持 33+ 主题、实时预览、多格式导出等功能。整个过程非常高效,想和大家分享一下开发体验。
项目背景
作为一个内容创作者,我经常需要在不同平台发布文章:
- 微信公众号需要特定的 HTML 格式
- 技术博客需要不同的主题风格
- 读书笔记需要优雅的排版
每次都要手动调整格式,效率太低。于是决定开发一个工具来解决这个问题。
为什么选择 Cursor AI?
在开发过程中,Cursor AI 真的帮了大忙:
1. 快速原型开发
从零到可用的原型,只用了几个小时。AI 快速生成代码框架,让我专注于功能设计。
2. 智能代码生成
复杂的 Vue 3 Composition API 代码,AI 秒生成。包括:
- 响应式数据管理
- 组件通信
- 生命周期处理
3. Bug 快速修复
遇到问题直接问 AI,快速定位和解决。比如:
- Mermaid 图表渲染问题
- KaTeX 公式显示异常
- 主题切换时的样式冲突
4. 技术选型建议
不确定用哪个库时,AI 给出专业建议:
- Marked vs Markdown-it
- Highlight.js vs Prism.js
- DOMPurify 的安全配置
5. 代码优化
AI 自动优化代码结构,提升性能:
- 防抖处理
- 懒加载
- 内存管理
核心功能实现
1. 主题系统
Cursor AI 帮我设计了一个灵活的主题架构:
// 主题配置与样式分离
export const themes = {
wechat: {
label: '微信公众号',
type: 'light',
icon: '💬'
},
// ... 33+ 主题
}
2. 实时预览
AI 协助实现了高效的实时渲染:
// 使用 Vue 3 的响应式系统
watch(markdownContent, (newContent) => {
// 防抖处理,提升性能
debouncedRender(newContent)
})
3. 多格式复制
AI 提供了优雅的复制方案:
// 公众号格式优化
function formatForWechat(html) {
// 去除不必要的标签
// 优化样式
// 适配微信编辑器
}
开发成果
- ✅ 33+ 主题:从 3 个扩展到 33 个
- ✅ 完整功能:从基础编辑到多格式导出
- ✅ 性能优化:加载速度快,体验流畅
- ✅ 代码质量:结构清晰,易于维护
使用场景
- 📝 技术文档:编写项目文档、API 说明
- 💬 公众号文章:一键复制,直接发布
- 📚 读书笔记:优雅的排版,舒适的阅读
- 🎓 学习笔记:支持数学公式和图表
在线体验
立即体验: duebasslei.github.io/md-cat/
开发感悟
使用 Cursor AI 开发这个项目,让我深刻体会到:
- AI 不是替代,而是增强:AI 帮我处理重复性工作,让我专注于产品设计
- 快速迭代:从想法到实现,速度提升了 10 倍
- 学习加速:在开发过程中,AI 解释代码逻辑,学到了很多
- 质量提升:AI 提供的代码建议,让项目更加健壮
技术栈
- Vue 3 + Vite - 现代化前端框架
- Marked - Markdown 解析
- Highlight.js - 代码高亮
- Mermaid - 图表渲染
- KaTeX - 数学公式
- DOMPurify - 安全防护
总结
Cursor AI 让开发变得如此高效!从想法到上线,整个过程非常顺畅。
GitHub: @DuebassLei/md-cat
如果这个项目对你有帮助,欢迎 ⭐ Star!