一个 Markdown 编辑器的诞生
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了一个 Markdown 编辑器的诞生，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3797字，纯文字阅读大概需要6分钟。
内容图文
为什么要开发一款新的编辑器
自从我开始使用 Markdown，就爱上了这种标记语法，轻量、纯文本兼容是最大的优点，哪里都可以编辑，一开始是在 IDE 上直接编辑，后来笔记越来越多，需要上传图片，有云同步、搜索的需求，尝试了 typora、有道云笔记、印象笔记、为知笔记后，发现各有个的缺点，除了 typora 大多数都是左编辑右预览的分屏模式，这对一个左撇子来说很难受，就像要我用右手拿剪刀裁剪一样，typora 是其中体验最好的，无奈没有在线版本，搜索、云同步、图片上传功能无法实现（或者需要复杂的配置），想到很多人也有类似的痛点，于是拉起团队打算搞在线版的 markdown 编辑器，目标是要达到 typora 类似的编辑体验，甚至更好。
叫什么名字
给一个产品起名字确实是很困难的事，既要国际化又要本地化，还得深度结合产品（比如知乎、百度中文含义深，但域名直接使用拼音也决定了产品国际化的困难），日思夜想，无意间想到 markdowner 这个名字，er 后缀结尾有特定人群的意思，如 follower，lover，中文名可以直接取自发音：码道人。码是代码的码，意思是编程道路上的人。nice ! 中文有深意同时解决国际化本地化的难题。
口号
码道人，开发者最好的朋友：Markdowner is coder‘s best friend.
最终效果
:grin: 先给大家看看效果，满足好奇心
插入文本样式
所见即所得，无需使用鼠标和工具栏，正常的 markdown 输入即可得到您想要的样式，全兼容 markdown 语法，没有任何输入负担，让您更专注于内容创作。 
插入代码块
快捷输入、支持多种语言、自动语法高亮、tab 键自动转换为空格，类似 IDE 的编辑体验 
插入数学公式
支持 Latex 语法的数学公式，$$ + enter 快捷插入，一边编辑一边预览，高效简洁
插入表格
全功能的表格编辑体验，避免手动输入字符排版，支持对齐、插入、删除，简洁实用高效。 
自动排版检查（Markdown lint）
自动检查常见排版错误，比如代码块中的 tab 键、不连续的标题跨越、标点符号前空格等，可以查看错误信息，双击提示按钮可自动修复错误，帮助排版出更漂亮的文档。 
智能黏贴
可以直接黏贴来自编辑器或其他网页的内容，自动转换为 markdown 格式，无需再次手工排版。 
源码编辑模式
随时可切换到源码编辑模式，复制黏贴原始 markdown 文档，两个编辑器的数据是同步且兼容的。 
图片插入无阻塞
支持直接拖动上传，操作更加方便，可在上传图片的同时编辑其他区域的文字，无需等待图片上传完成，编辑无阻塞。
响应式布局
全站响应式布局，兼容 Paid 和移动端显示，支持分屏显示，避免频繁切换窗口，边看资料边记录，关注点分离，全程无阻塞。
实现细节
多端兼容之 Twitter 三段式
现在移动端用户越来越多，网页多端兼容是必须的，如此一来必须解决一个世界性的 UI 难题：
移动端水平空间不足、电脑端垂直空间不足（系统任务栏+浏览器tab栏+地址栏+收藏夹占用大量垂直空间）。
要想在移动端和电脑端都保持良好的交互体验太难了，我们参考了大量的 UI 设计，其中在facebook 网页版、 twitter 网页版、iPad、虎牙斗鱼网页APP版获取到很多想法：
- 多端设计中电脑端到手机端的跨越无法很好实现，其中最明显的就是导航栏差异太大，点击与触摸交互难以兼容，例如 Facebook 的电脑网页版到手机端 lite 版本，太多体验不一致，导致 lite 版本很鸡肋，但 twitter 就做的很好。
- 扁平化设计是必须的，不能有过多灰色、阴影过渡体现层次感，最多只能一层，否则移动端体验太差。
考虑再三我们决定参考 twitter 三段式的结构解决这个问题（可能是这个问题的唯一解），电脑端的交互体验类似 iPad，这样过渡到移动端较为方便，同时导航栏自由度高，可以用来实现工具栏，垂直空间利用充分。
分类系统
印象笔记的两级分类（笔记本 -> 笔记）在笔记数量较多的时候常常出现列表过长，难以找到相关笔记的问题，码道笔记采用文件树 + 置顶的形式（后续还将支持标签系统），管理笔记更加自由方便，如下图：
可以直接进入文件夹，也可以直接展开当前文件树，置顶文件优先显示，支持全局搜索，在文件夹页面、搜索页面都可以实现笔记编辑，多维度管理更加自由。
内容排版 what you see is what you get
印象笔记网页版不支持 markdown，app 版本需要分屏显示（大部分的 markdown 笔记产品都是分屏显示，如马克飞象、有道云笔记），分屏最大的缺点就是没有空间显示大纲栏了，长笔记无法很好跳转相应章节，使用体验还不如直接打开 IDE + git + onedrive。
为知笔记虽然是单屏，但采用编辑、预览切换的方法，实际使用需要重复切换，使用体验更差。码道笔记的编辑器是所见即所得的，单屏显示，编辑体验类似 typora，无需分屏，所写即所得。
在线网址：码道人，做开发者最好的朋友，欢迎大家体验～
内容总结
以上是互联网集市为您收集整理的一个 Markdown 编辑器的诞生全部内容，希望文章能够帮你解决一个 Markdown 编辑器的诞生所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。