请教老司机, Markdown 即时预览怎么实现?

2016-08-04 20:06:27 +08:00
 kexxxfeng

即时预览怎么实现

我所知的 Markdown 都是客户端编辑,然后上传至服务器解析,生成 html 返回。但是最近在有些网站上看到即时预览的效果,感觉很炫酷,于是开始琢磨怎么实现的。


客户端编辑时,同时上传文本,服务器编辑之后返回。

但是流量太大,基本 hold 不住。


有 js 版的解析引擎,在客户端即时解析。

如果有的话,目测体积应该也不会太小。

请教各位老司机,给小子开开眼👀。

5261 次点击
所在节点    程序员
11 条回复
ZE3kr
2016-08-04 20:11:41 +08:00
yzhen123
2016-08-04 20:17:53 +08:00
markdown-it
cxbats
2016-08-04 20:21:36 +08:00
pagedown
iVanilla
2016-08-04 20:25:52 +08:00
推荐 SegmentFault 开发的 HyperDown.js : https://github.com/SegmentFault/HyperDown.js
当然他们也有 PHP 版: https://github.com/SegmentFault/HyperDown
SegmentFault 的 markdown 有个好处,就是回车换行可以直接识别,无需用<br>之类的符号。
flyslow
2016-08-04 20:41:40 +08:00
marked
kimown
2016-08-04 21:00:44 +08:00
不知道 LZ 接触过 react 没有,原先 react 官方有一个及时渲染 md 的小 demo ,就是用的 https://github.com/evilstreak/markdown-js 这个库,就是实时解析 md 到 html
还有我自己使用 react 结合 webpack ,写了一个实时展示 hexo 博客内容的小工具,它的实现是由 webpack dev server 实现的, https://github.com/kimown/hexoserver ,它的原理我觉得还挺好玩的,没深究。
Lpl
2016-08-04 21:40:37 +08:00
mark.js , github 搜搜
ss098
2016-08-04 21:57:54 +08:00
Vue.js 基于 marked 的示例 https://vuejs.org.cn/examples/
ericls
2016-08-05 10:47:02 +08:00
javascript
jiyinyiyong
2016-08-05 18:36:04 +08:00
我写过一个 https://github.com/Memkits/marked-react-editor
寸志也写了一个 https://github.com/island205/h2m

基于 React 的话更新会少一点, 看上去会舒服一些. 不过 像 SegmentFault 那样用黑科技也还好.
前端 js 的 Markdown parser 建议 CommonMark 或者 Marked.
mapleth
2016-08-22 12:51:27 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/297185

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX