请教下,使用markdown编辑器后在前端的展示方案是怎样的?
正在建设的知识付费应用使用了 learnku.com 所用的 editor.md
编辑器,在前端展示的时候遇到了问题,想知道 learnku.com 使用的是哪个方案?
方案一:分两个字段,一个保存 markdown + 一个保存 html#
1、数据库有两个字段,一个是 markdown_content
,一个是 html_content
,分别保存两种不同的格式,模板直接显示 html
2、后台和前台都不再需要做额外的处理
优点:操作简单,可实现 editor.md 的默认效果,真正的可见即所得
缺点:增加了数据库的存储空间
方案二:保存 markdow + 前台 editor.md
js 解析#
1、内容字段保存的是 markdown 格式(同方案 1)
2、与方案一不同的是,在模板输出的仍然是 markdown,但是使用了 editor.md
的 markdown to html
功能,在浏览器端,也就是用户看到的是 js 转换后的 html,查看源码仍然是 markdown 格式
优点:不占用数据库空间,也可以实现 editor.md 的默认效果
缺点:因为源代码中仍然是 markdown 原始格式,没有 h2、h3 等标记,不适合 SEO,所以该方案可暂时抛弃。
方案三:保存 markdown + 后台 parsedown 解析#
1、内容字段保存的是 markdown 格式
2、后台使用 parsedown 把 markdown 格式转成 html,然后在模板显示 html
3、前台使用 Highlight.js
等代码高亮插件,显示 code 类代码
优点:不占用数据库空间,因为是后台将 markdown 转为了 html,不给前端增加负担
缺点:无法实现代码行号;因为有这个 js 的加入,显示速度可能会慢
在这里想真心请教下各位大牛,除了这三种方案外,是否还有更优的解决方案?
推荐文章: