Cherry Markdown 文档渲染方案解析

背景介绍

Cherry Markdown 是一款功能强大的开源 Markdown 编辑器，广泛应用于各种文档编辑和展示场景。在实际项目中，开发者常常面临如何高效渲染已发布 Markdown 文档的问题。本文将深入探讨 Cherry Markdown 的文档渲染方案，帮助开发者选择最适合的技术实现路径。

渲染方案对比

方案一：直接存储 HTML 渲染

这种方案在后台直接存储 Markdown 转换后的 HTML 内容，前端通过安全过滤器直接渲染：

<div class="cherrymd-container" id="cherrymd-container">
     {{ article.content | safe }}
</div>

优点：

• 实现简单直接
• 渲染性能高，无需前端二次转换

缺点：

• 存储空间占用较大
• 灵活性较低，修改文档需要重新生成 HTML

方案二：存储 Markdown 动态渲染

此方案保存原始 Markdown 内容，前端动态转换为 HTML：

let myeditor = new Cherry({id: 'cherrymd-container'});
let markdown = $('#cherrymd-container').text();
let html = myeditor.engine.makeHtml(markdown);
$('#cherrymd-container').html(html).show();

优点：

• 存储空间占用小
• 灵活性高，便于后续编辑

缺点：

• 实现相对复杂
• 需要前端额外处理

推荐方案：纯预览模式

Cherry Markdown 提供了更优雅的解决方案——纯预览模式。这种方式既保留了 Markdown 存储的灵活性，又简化了前端实现：

let markdown = $('#cherrymd-container').text();
let myeditor = new Cherry({
  id: 'cherrymd-container',
  editor: {
    defaultModel: 'previewOnly',  // 设置为纯预览模式
  },
  value: markdown,
  toolbars: {
    toc: {
      updateLocationHash: false,
      defaultModel: 'full',  // 完整目录模式
    },
  }
});

核心优势：

1. 内置 Markdown 解析引擎，无需手动转换
2. 支持完整的目录生成功能
3. 提供丰富的预览样式配置选项
4. 保持与编辑模式一致的渲染效果

数据存储建议

针对文档存储，推荐采用三份数据并存策略：

1. HTML 数据：用于导出、邮件发送等场景
2. Markdown 原始数据：用于编辑和内容回显
3. 纯文本数据：去除所有 HTML 标签，用于数据库搜索

这种多格式存储方案虽然增加了少量存储成本，但极大提升了系统在各种场景下的适应能力。

服务端渲染支持

Cherry Markdown 也支持 Node.js 环境下的服务端渲染(SSR)，开发者可以在构建阶段或服务器端预先将 Markdown 转换为 HTML，进一步提升首屏加载性能。这种方案特别适合对SEO有要求的应用场景。

总结

Cherry Markdown 提供了灵活的文档渲染方案，开发者可以根据项目需求选择最适合的方式。对于大多数应用场景，推荐使用纯预览模式，它平衡了存储效率、实现复杂度和功能完整性。对于特殊需求，可以考虑服务端渲染或混合存储方案。通过合理选择渲染策略，可以构建出高性能、易维护的文档展示系统。