用 Cursor AI 打造 MD Cat:一个功能强大的 Markdown 编辑器

0 阅读3分钟

用 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/

image.png

开发感悟

使用 Cursor AI 开发这个项目,让我深刻体会到:

  1. AI 不是替代,而是增强:AI 帮我处理重复性工作,让我专注于产品设计
  2. 快速迭代:从想法到实现,速度提升了 10 倍
  3. 学习加速:在开发过程中,AI 解释代码逻辑,学到了很多
  4. 质量提升:AI 提供的代码建议,让项目更加健壮

技术栈

  • Vue 3 + Vite - 现代化前端框架
  • Marked - Markdown 解析
  • Highlight.js - 代码高亮
  • Mermaid - 图表渲染
  • KaTeX - 数学公式
  • DOMPurify - 安全防护

总结

Cursor AI 让开发变得如此高效!从想法到上线,整个过程非常顺畅。

GitHub: @DuebassLei/md-cat

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