像 typora 这种原地渲染显示的 markdown 编辑器原理是什么呢，需要用 textarea 写一个简单的，能做到吗

[zxCoder]

有个任务需要写一个超级简单的编辑器，大概就是支持 markdown 的一小部分语法。左边源文本，右边预览这种比较简单，那如果要做到原地渲染显示，需要怎么做呢？完全没有思路

[jackmod]

vscode 的 markdown 插件也可以实时预览，或许可以参考。

[4ark]

为什么不用开源的？搜一下 markdown editor

[ihainan]

有开源实现 vditor 可以参考一下，楼上的 markdown editor 也是基于 vditor 做的实现。

https://github.com/Vanessa219/vditor

[Panway]

Typora 应该是前端渲染的，这类编辑器开源的可太多了：

https://doocs.github.io/md/#/

https://labs.lyric.im/wxformat/

https://github.com/markedjs/marked

[myd]

contenteditable 属性

[bnm965321]

所见即所得是个很大的坑，目前市面上也就 typora 做的比较好。

不过我不太喜欢所见即所得的编辑方式

[ihainan]

@bnm965321 Typora 对我个人来说最大的痛点是没有网页端，VS 扩展 zaaack's Markdown Editor 配合 Code Server 算是某种程度上解决了这个问题而且体验相对最接近 Typora 的（虽然还是有差距）。

[ipwx]

推荐一波 Milkdown： https://github.com/Saul-Mirone/milkdown

[12tall]

我有一个没验证的想法，就是控件监听用户输入存到 localstorage 或者其他地方，然后再从 localstorage 渲染到控件。

[zhaiblog]

@ihainan milkdown 不错，可以试试

[ihainan]

@zhaiblog 试了一下在线 demo，不知道为啥我输入 $$ 会被转义，其他看起来挺棒，我研究一下，感谢！

[zqli92]

如果你只要左编辑右预览，给你个方案：codemirror 做代码编辑器，markdown-it 或 remark 做渲染，上面说的基本都是这种，很容易做，掘金、腾讯开源的 markdown 编辑器都是这么做的，如果想要所见即所得，类似 word 那种，就是上面说的 milkdown ，这种也非常多，开发难度高一点（因为文档字符流是分离的），可以基于 prosemirror 或者 slatejs 去做，基本 markdown 标记都是有的，官方 demo 直接就是这种了。类似 typora 那种难度比较大，目前在线版本只看到一个： https://markdowner.net ，体验非常接近了，也支持 latex ，表格功能更好用

[mirone]

@zqli92 其实我个人感觉第三种可能在技术难度上没有第二种大，因为只要把每个编辑的位置替换成一个源码模式的编辑框就好了，需要解决的 coner case 可能还没有第二种多。