1小时原型开发：基于CodeMirror的Markdown实时预览工具

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   开发一个Markdown实时编辑预览工具，左侧是CodeMirror实现的Markdown编辑器，右侧是实时渲染结果。要求：1) 支持GFM语法 2) 实现工具栏快捷按钮 3) 添加目录生成功能 4) 支持导出HTML/PDF。使用CodeMirror中文文档中关于Markdown模式和扩展开发的内容，在代码中添加详细注释说明每个功能的实现原理。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近在开发一个需要支持Markdown编辑的功能模块时，发现了CodeMirror这个强大的在线代码编辑器。通过研究CodeMirror的中文文档，我仅用一小时就完成了一个功能完整的Markdown实时预览工具的原型开发。下面分享我的开发过程和经验总结。

1. 项目整体架构设计

这个工具的核心功能是左侧编辑、右侧实时预览的Markdown编辑器。考虑到开发效率，我选择了以下技术方案：

• 使用CodeMirror作为编辑器核心
• 搭配marked.js实现Markdown解析
• 采用简单的HTML+CSS布局
• 通过少量JavaScript代码实现交互功能

2. 编辑器基础配置

首先需要初始化CodeMirror编辑器实例。根据文档说明，主要配置包括：

1. 设置mode为'markdown'以支持Markdown语法高亮
2. 配置lineNumbers显示行号
3. 开启lineWrapping实现自动换行
4. 设置theme选择编辑器主题
5. 配置extraKeys添加自定义快捷键

3. GFM语法支持实现

GitHub Flavored Markdown(GFM)是常用的Markdown扩展语法。通过以下步骤实现支持：

1. 加载CodeMirror的Markdown模式
2. 配置marked.js使用GFM选项
3. 为表格、任务列表等GFM特性添加对应的CSS样式
4. 在预览区域正确处理换行符和URL自动链接

4. 工具栏快捷按钮开发

为提高编辑效率，我在编辑器上方添加了常用格式的快捷按钮：

1. 创建包含粗体、斜体、链接等按钮的工具栏
2. 为每个按钮绑定点击事件
3. 使用CodeMirror的replaceSelection方法插入对应语法
4. 添加快捷键绑定，如Ctrl+B对应加粗

5. 目录生成功能

自动生成文档目录可以提升阅读体验，实现步骤包括：

1. 解析Markdown内容获取所有标题
2. 根据标题级别生成嵌套的目录结构
3. 为目录项添加点击跳转功能
4. 在编辑器滚动时高亮当前章节

6. 导出功能实现

为方便内容分享，我添加了两种导出方式：

1. HTML导出：将渲染后的内容包裹在完整HTML结构中
2. PDF导出：使用浏览器打印功能转换为PDF格式
3. 添加导出按钮和相应的事件处理

7. 实时预览机制

核心的实时预览功能通过以下方式工作：

1. 监听CodeMirror的change事件
2. 获取编辑器当前内容
3. 使用marked.js转换为HTML
4. 更新预览区域内容
5. 添加防抖处理优化性能

8. 开发心得与优化建议

在这次快速原型开发中，我总结了几个关键点：

• CodeMirror文档结构清晰，API设计合理，学习曲线平缓
• 组合使用多种轻量级库可以快速实现复杂功能
• 实时预览要注意性能优化，避免频繁重绘
• 扩展功能时保持代码模块化，便于维护

未来可以考虑添加的功能包括：

1. 主题切换支持
2. 代码块语法高亮
3. 图片上传和嵌入
4. 版本历史记录

整个开发过程在InsCode(快马)平台上完成，无需配置本地环境，代码编辑和预览都可以直接在浏览器中进行，特别适合快速原型开发。平台的一键部署功能还能将项目直接发布到线上，分享给他人使用，大大提升了开发效率。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   开发一个Markdown实时编辑预览工具，左侧是CodeMirror实现的Markdown编辑器，右侧是实时渲染结果。要求：1) 支持GFM语法 2) 实现工具栏快捷按钮 3) 添加目录生成功能 4) 支持导出HTML/PDF。使用CodeMirror中文文档中关于Markdown模式和扩展开发的内容，在代码中添加详细注释说明每个功能的实现原理。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果