為什麼要開發一款新的編輯器
自從我開始使用 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，無需分屏，所寫即所得。
線上網址：碼道人，歡迎大家體驗～
本作品採用《CC 協議》，轉載必須註明作者和本文連結