12行代码实现一个网页版Markdown编辑器：实时预览
时间：2023-04-02 17:45:14
HTML
首先，我承认头条党的怀疑在所难免。．．不过请继续往下看，你会发现干货源码还是有的：https://github.com/shuiRong/m...Demo:https://shuirong.github.io/src/写这个Markdowneditor设备有两个难点：1.分析Markdown语法中的文本2.实时检测页面文本变化。对于1，我在Gayhub上找到了markedJS，通过阅读README可以快速上手。2，我选择了VueJS，因为看中了她双向绑定的特性（当然data和view单向绑定就够了）。而且VueJS非常轻量，简单易用，更不用说，中文文档简直是业界良心。注意：我使用highlight.jsindex.html进行代码高亮
main.jsvarvm=newVue({el:'#container',data:{text:''},computed:{markedText:function(){returnmarked(this。文本）;}}}）;这是核心部分。然后自定义相关的CSS，一个支持实时预览的Markdown编辑器就搞定了。很简单？当然不能这么说。因为markdown语法解析和实时预览最难的地方是引用了别处的代码。如果都是自己领悟的话，喝一壶就够了。说到这里，我们来说说MD语法解析和数据双向绑定的实现。MD语法分析：如果简单实现和玩玩，基本的HTML/CSS/JS和主要的正则表达式就够了。实时预览的关键点是数据和视图的单向绑定。进一步介绍见这里
