一款免费的在线 Markdown 笔记，类似 typora 编辑体验

为什么要开发一款新的编辑器

自从我开始使用 Markdown，就爱上了这种标记语法，轻量、纯文本兼容是最大的优点，哪里都可以编辑，一开始是在 IDE 上直接编辑，后来笔记越来越多，需要上传图片，有云同步、搜索的需求，尝试了 typora、有道云笔记、印象笔记、为知笔记后，发现各有个的缺点，除了 typora 大多数都是左编辑右预览的分屏模式，这对一个左撇子来说很难受，就像要我用右手拿剪刀裁剪一样，typora 是其中体验最好的，无奈没有在线版本，搜索、云同步、图片上传功能无法实现（或者需要复杂的配置），想到很多人也有类似的痛点，于是拉起团队打算搞在线版的 markdown 编辑器，目标是要达到 typora 类似的编辑体验，甚至更好。

叫什么名字

给一个产品起名字确实是很困难的事，既要国际化又要本地化，还得深度结合产品（比如知乎、百度中文含义深，但域名直接使用拼音也决定了产品国际化的困难），日思夜想，无意间想到 markdowner 这个名字，er 后缀结尾有特定人群的意思，如 follower，lover，中文名可以直接取自发音：码道人。码是代码的码，意思是编程道路上的人。nice ! 中文有深意同时解决国际化本地化的难题。

口号

码道人，开发者最好的朋友：Markdowner is coder‘s best friend.

最终效果

先给大家看看效果，满足好奇心

插入文本样式

所见即所得，无需使用鼠标和工具栏，正常的 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，无需分屏，所写即所得。

在线网址：码道人，欢迎大家体验～