请教老司机， Markdown 即时预览怎么实现？

[kexxxfeng]

即时预览怎么实现

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

• 猜想 1:

---

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

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

• 猜想 2:

---

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

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

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

[ZE3kr]

https://github.com/evilstreak/markdown-js

[yzhen123]

markdown-it

[cxbats]

pagedown

[iVanilla]

推荐 SegmentFault 开发的 HyperDown.js ： https://github.com/SegmentFault/HyperDown.js
当然他们也有 PHP 版： https://github.com/SegmentFault/HyperDown
SegmentFault 的 markdown 有个好处，就是回车换行可以直接识别，无需用<br>之类的符号。

[flyslow]

marked

[kimown]

不知道 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]

mark.js ， github 搜搜

[ss098]

Vue.js 基于 marked 的示例 https://vuejs.org.cn/examples/

[ericls]

javascript

[jiyinyiyong]

我写过一个 https://github.com/Memkits/marked-react-editor
寸志也写了一个 https://github.com/island205/h2m

基于 React 的话更新会少一点, 看上去会舒服一些. 不过 像 SegmentFault 那样用黑科技也还好.
前端 js 的 Markdown parser 建议 CommonMark 或者 Marked.

[mapleth]

https://pandao.github.io/editor.md/examples/index.html 国人开发的