Markdown 的优势
1. 所见即所得,易上手、自由分享,搭配文档基建,可做内容产品的入口,分享的起点。
2. 通用格式,多平台支持,格式转换和移植方便,文档理应做 markdown 的集散地。
3. 专注内容而非排版,编辑者只需专注内容本身,无需花费时间在排版上。
背景
文档的私有化用户与 c 端用户对于 markdown 格式的文档预览与编辑有强烈的诉求,希望补齐文档这方面的空白,满足客户诉求。
目标
设定 markdown 技术项投入开发的里程碑与时间节点。
一期 - 完成 markdown 上传/预览(兼容多媒体文件预览)
二期 - 完成 markdown 编辑功能(云端编辑/协同)
三期 - 编辑态所见即所得模式
竞品分析
对市面上的 markdown 编辑服务进行调研与分析,方便后续能力上对齐,同时侧面了解市场对 markdown 格式文件的诉求。
cmd 作业部落 |
HackMD |
Notion |
Typroa |
|
| 是否支持协同 | ✅ | ✅ | ✅ | ❌ |
| 优缺点 | 使用人数较多,主要是用于记录笔记与博客,目前投入比较少,编辑器也比较多 bug |
开源为较老的版本,一般是用户私有化部署 | 作为生产效率工具提供给用户,生态比较完善,不单作为 markdown 编辑 |
编辑器只支持所见即所得编辑模式,只作为本地 markdown 编辑器使用 |
| 是否付费 | ✅ | ✅ | 个人免费 | ✅ |
目前市面上主流的 markdown 本地编辑软件,主要是靠买断付费,市面上大部分的 markdown 编辑软件,严格意义上来说不算我们的竞品,markdown 面对的用户并不只是技术宅,而是广义上的互联网写作者,他们没有那么在乎 word 的各种高级编辑格式,他们在乎的是:
1. 方便的信息收集
2. 流畅的编辑体验
3. 自由的知识分享
4. 安全的信息备份

技术选型 & 调研
技术调研的方向是:
1. 查找哪类组件满足支持编辑态,预览态的转换与能力支持
2. 区分哪些是完整的编辑器并且具备完善的社区生态。
注意:类似 markdown-it 这种,它只是 parser 库,在能力上与完备性上并不具备支持完整产品的能力,只在后续实现编辑态做技术研究参考。
针对需要的能力对市面上的框架和库进行能力调研,
Cherry-Markdown |
Unified - Remark |
|
| 社区是否成熟 | 社区使用比较少,一般是公司内使用 | 社区成熟,插件丰富 |
| 是否支持编辑/预览 | 支持 | 支持 |
| 是否支持所见即所得模式 | 暂不支持 | 支持 |
cherry-markdown 是公司内组件,方便共建与生态建设,并且基本所需的编辑态与预览态。因此选用 cherry-markdown 作为基座。
预览
预览态的功能规划。
基础语法预览完备
如 markdown todo 列表语法,表格语法,时序图语法都需要支持。
多媒体文件 - 图片
需要实现导入图片的时候,自动将 md 文件里面的本地图片进行上传到对应的图床中,并且自动将文件里面对应的图片链接更换为图床链接。
在导出的时候,需要将原来本地的图片链接更换为相对路径,并且导出为一个 zip 包。
当没有配置图床时,图片以 base64 存储 · Issue #545 · Tencent/cherry-markdown · GitHub
多媒体文件 - 视频
类似图片的处理方式,接入利用 drive 能力,支持视频文件的预览。
多媒体文件 - 远程视频 url(是否带封面)
在支持视频文件的基础上,支持配置视频的封面(markdown 语法实现)。
代码高亮 & 代码主题
code block 支持多种代码主题渲染与多种语言支持。
emoji 渲染支持
目前只有预设的几个表情

需要支持类似中文语法渲染,比如
:呲牙:
AI 预览
AI 的结果预览渲染
编辑
编辑态相关的功能规划。
批量上传
支持 markdown 文件上传并进行云端编辑。
多人编辑
支持 markdown 多人协作。这里需要将 openDoc 的 mutation 操作与对于 markdown 文件的底层数据进行映射。通过 mutation 实现多人共同编辑同一 markdown 文件的冲突解决与云端编辑。
版本管理
对于 markdown 文件的编辑,需要有版本管理,用户能够知道单个 markdown 文件的编辑版本历史,并且能够进行回退等操作。
导入导出
支持 markdown 文件导入导出。
注意 markdown 文件中的多媒体文件处理。
指令/快捷键提示
类似 notion 的体验,能够出现输入指定的符号,出现提示指令。
性能优化
长文本情况下,全选粘贴替换内容时会有性能问题 · Issue #763 · Tencent/cherry-markdown · GitHub
三种模式
[Bug Report] 预览时,部分组件可编辑,比如表格、列表、图片 · Issue #765 · Tencent/cherry-markdown · GitHub
[Feature Request] 希望有一个即时渲染模式,所见即所得,像 vditor 那样,这样可以让不熟悉 markdown 语法的用户也能轻松二次编辑 markdown 文档 · Issue #716 · Tencent/cherry-markdown · GitHub
生态
markdown 适合做各类格式的中转,打通各类格式的生态。
一键发布
将 markdown 文件批量发布到多个内容平台上面
导出为简历
将 markdown 文件导出为 pdf 等简历文件,与目前简历模板生态打通。
业务思考
下面是一些关于业务在调研时结合竞品的一些思考,后面在实现 md 相关功能可以做好相关的能力储备与实现思考。
协同编辑
在线人员列表,OT 算法,版本管理
会议模式
https://hackmd.io/s/live-hosting-tw
会议指引,跟随功能。
借助协同编辑的功能加上目前在线人员列表,用于主持人在主导会议的时候,使用跟随或者不跟随的功能,主导会议进程与同步信息。

书本模式
适合于小型团队沉淀知识库使用。
将 markdown 文件进行发布,发布后形成类似书本的组织形式,复用预览态。

简报模式
利用 markdown 语法,转化为简单的 slide 进行会议的讲解。
https://hackmd.io/p/slide-example#/
商业化
互联网写作者编写 markdown 时候的痛点是什么,我们的优势是什么,或许就是我们可以尝试商业化的地方,从知识分享的几个阶段来入手。
知识的收集 - 高级输入能力
公众号直接输入信息保存成 markdown。
知识的输出 - 高级编辑能力
1. 超大附件上传
2. 支持自定义图床
3. 云端储存大小
4. 协作编辑能力,人数
5. ai 优化能力,根据「中文技术文档的写作规范」一键优化文章格式,比如中英文空格,「」的使用,换行的使用 https://github.com/ruanyf/document-style-guide
知识的整理 - 知识库能力
1. 无限数量知识库
2. 单知识库的文档数量
3. 协作人数
知识的传播
1. 一键发布多平台
2. 我们自己有知识库的话,我们自己的发布态,无限期公开知识库
3. 自定义分享域名
知识的备份
1. 高级导出能力,PDF,HTML,word ,自定义水印等,我们文档做这个事情天然是有优势的
2. 一键同步整个知识库到本地 markdown 等,这个可以是桌面端独占的会员能力
3. 第三方的 S3 数据同步,第三方的 webDAV 数据同步等
综上均可通过会员制提供增值服务,也可以做单次收费。
Markdown 技术选型
● cherry-markdown:GitHub - Tencent/cherry-markdown: ✨ A Markdown Editor
● markedjs:GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.
● markdown-js: GitHub - evilstreak/markdown-js: A Markdown parser for javascript
1. 初步对比上面 markdown 渲染的几个方案:
● Cherry Markdown:支持更多的语法特性,如表格、任务列表、数学公式等。性能较好,支持多种输出格式,可定制性较强。但是,更新维护可能不如其他两个方案频繁。
● Marked.js:轻量级,解析速度较快,支持自定义渲染器。社区活跃度较高,更新维护较为频繁。但是,不支持一些高级特性,如数学公式等。
● Markdown-js:功能较为全面,API 简单易用,支持插件。但是,解析速度和性能相对较差,社区活跃度较低。
2. 基于 Drive 体系做 Markdown 预览:
基于现有的 Drive Api,将 Markdown 文件上传到 Drive,然后使用选定的 Markdown 渲染库进行预览。
3. 根据用户数据,增加编辑功能(不考虑协同):
可以使用 CodeMirror 或 Monaco Editor 等开源编辑器组件,提供 Markdown 编辑功能。结合预览功能,实现所见即所得的编辑体验。
4. 根据用户反馈考虑是否增加协同编辑:
如果用户需求强烈,可以考虑引入实时协同编辑功能,如基于 Operational Transformation(OT)或 Conflict-free Replicated Data Types(CRDT)等技术实现。
5. 打通外部的一些 Markdown 体系,如公众号、简书、个人博客等:
可以通过各平台的 API,实现 Markdown 文件的一键发布功能。
技术选型方案
● Markdown 渲染库:Cherry Markdown(功能强大,性能较好)
● 编辑器组件:CodeMirror(轻量级,易于集成)GitHub - codemirror/codemirror5: In-browser code editor (version 5, legacy)
● 协同编辑技术(如需求强烈):Operational Transformation(OT)
● 与外部平台对接:使用各平台 API 实现一键发布功能
综合考虑以上因素,推荐使用 Cherry Markdown 作为渲染库,CodeMirror 作为编辑器组件。如有协同编辑需求,可以采用 OT 技术实现。同时,通过各平台 API 实现与外部 Markdown 体系的打通。
CodeMirror 作为编辑器组件解释:
Cherry Markdown 作为一个 Markdown 渲染库,其主要功能是将 Markdown 文本解析并渲染成 HTML,而不是作为一个编辑器组件提供编辑功能。
编辑器组件,如 CodeMirror 和 Monaco Editor,主要提供了一个用户友好的界面,让用户可以方便地输入和编辑文本。这些编辑器组件通常支持多种编程语言和文本格式的语法高亮、代码提示等功能,包括 Markdown。
要实现一个完整的 Markdown 编辑器,需要将 Markdown 渲染库(如 Cherry Markdown)和编辑器组件(如 CodeMirror)结合起来。用户在编辑器组件中输入和编辑 Markdown 文本,然后使用渲染库将文本解析并渲染成 HTML,实现所见即所得的编辑体验。
所以,Cherry Markdown 不能作为编辑器组件,因为它的主要功能是解析和渲染 Markdown 文本,而不是提供文本编辑功能。您可以将 Cherry Markdown 与 CodeMirror 等编辑器组件结合使用,以实现一个完整的 Markdown 编辑器。