妝罷低聲問夫婿, 畫眉深淺入時無——我的年度Markdown筆記軟件VNote

作為現(xiàn)今最流行的輕量級標記語言之一,Markdown越來越多地被人們所認識和接受癌椿。各種以“Markdown入門”和“最流行的Markdown編輯器”為標題的文章充斥著網(wǎng)絡(luò)。我重度使用Markdown來記筆記已經(jīng)有差不多6年了杉允,其中使用或試用過不少筆記軟件和Markdown編輯器膳犹。在漫長的折騰過程中,漸漸地也對Markdown有了自己的切身的認識蜂林,同時也對一個Markdown筆記或編輯器軟件有了自己的評判標準遥诉。逐漸地,對用過的軟件開始感到不甚滿意噪叙,于是萌生了自己開發(fā)一個Markdown筆記軟件的想法矮锈。

2016年10月1日,我開始寫一個屬于自己的筆記軟件來滿足自己的一些需求睁蕾,那就是 VNote 苞笨。隨著開發(fā)的進行迭代和越來越多用戶的加入,對于Markdown的認識以及VNote的定位也在不斷變化子眶。對于自己心中理想的Markdown筆記軟件也有一定想法瀑凝。

下面我想說說VNote的一些使用或設(shè)計的考慮,一來和大家交流一下Markdown的心得臭杰,二來也聽聽大家對VNote的一些看法粤咪。希望我的2017年度最佳軟件,也能獲得您的一份認同渴杆!

Markdown與實時預(yù)覽的糾葛

說起Markdown寥枝,大家想到的是什么呢?我覺得是實時預(yù)覽磁奖。之前我給大家推廣VNote或者用戶剛進討論組的時候囊拜,不少人的第一反應(yīng)是“VNote支持實時預(yù)覽嗎?”比搭。

Markdown作為一種標記語言冠跷,和其他的標記語言一樣,沒有富文本的所見即所得身诺,帶有與生俱來的編輯和閱讀之間的割裂感蔽莱。一個很自然而且傳統(tǒng)的處理方式就是實時預(yù)覽:一邊編輯,一邊預(yù)覽處理后的效果戚长。這也是大部分Markdown編輯器采用的處理方式 盗冷。久而久之,大家便一看到Markdown就想到實時預(yù)覽了同廉,也自然而然地覺得Markdown和實時預(yù)覽是天生的一對兒仪糖。

這些年柑司,我用過的軟件

從讓我接觸Markdown的為知筆記開始 ,作為一個工具控锅劝,折騰了不少Windows下的筆記軟件和Markdown編輯器攒驰。下面簡單說一下幾個代表性的軟件 。

為知筆記

為知筆記故爵,作為擁有Linux客戶端的云筆記軟件玻粪,其實是非常不錯的。但是诬垂,它對于Markdown的支持只能說是馬馬虎虎劲室。

  • 使用HTML來保存和編輯Markdown內(nèi)容,因此即使是Markdown下也有各種逼死強迫癥的格式問題结窘,如行距不一很洋、段落格式不一等等;特別是復(fù)制一段富文本過來的時候隧枫,足以讓我崩潰喉磁;

  • 沒有Markdown語法高亮,在編輯模式下完全是白底黑字官脓,很容易讓人迷失在黑壓壓的文字中协怒;

  • 在編輯模式下大綱是廢的,不過最近的版本好像已經(jīng)實現(xiàn)了卑笨。當時候孕暇,為了在編輯時使用大綱來顯示文章脈絡(luò),聰明的我把Markdown的各個標題都應(yīng)用一下標題樣式湾趾,這樣總算能顯示大綱了芭商。感覺這真的是Markdown的恥辱派草;

總的來說搀缠,在消除編輯和閱讀之間的割裂感上,為知筆記是一點也不著力近迁,單純將Markdown當做純文本來處理了艺普。

為知筆記當時的一個優(yōu)點是支持直接貼圖和顯示圖片,在幾年前應(yīng)該是比較先進的鉴竭。后來畢業(yè)設(shè)計歧譬,需要大量記錄代碼閱讀筆記,往往需要在一篇很長的文章里面的不同標題之間進行跳轉(zhuǎn)搏存,被為知筆記實在虐待得不輕瑰步,于是轉(zhuǎn)投CMD Markdown。

CMD Markdown

CMD Markdown對于Markdown的支持非常好璧眠,采用的是實時預(yù)覽的機制缩焦,即一邊編輯读虏、另一邊預(yù)覽渲染后的效果。另外袁滥,編輯窗口中也對Markdown進行語法高亮盖桥,幫助用戶辨識文章脈絡(luò);同時也支持大綱题翻。所以揩徊,從為知筆記切換到CMD Markdown時真的是一種解脫!

但是CMD Markdown提供的客戶端是包了一皮的Web嵌赠,因此反復(fù)切換多個文件的時候塑荒,比較卡頓。后來猾普,實在忍受不了袜炕,就開始尋找其他替代品了。后面找的很多編輯器初家,要不就是不支持Linux偎窘,要不就是不支持多標簽頁(說到多標簽頁,這里要吐槽一下有道云筆記溜在,居然點擊一下目錄樹的目錄都會把當前打開的文件給關(guān)掉)陌知。后來,找到了Typora掖肋,簡直是驚艷捌推稀!

Typora

Typora讓我知道——原來Markdown還可以這樣玩志笼!Typora既不是為知筆記那樣“無為而治”沿盅,也不像其他編輯器那樣采用雙邊實時預(yù)覽,而是原地將Markdown渲染為對應(yīng)的元素纫溃,輸入后直接顯示渲染后的效果腰涧。這簡直可以說是幾乎完美地解決了Markdown的編輯和閱讀之間的割裂感的問題!

但是紊浩,使用了幾天后窖铡,發(fā)現(xiàn)Typora其實并沒有想像的那么完美:

  • 我輸入的文字,Typora馬上就轉(zhuǎn)換為渲染后的元素坊谁,如果需要往回修改的話费彼,你需要把光標放那然后等上一會,才會顯示Markdown的文本口芍。我覺得我對我的內(nèi)容失去了掌控箍铲,我需要清楚地知道我輸入的文本是什么,而不是向我屏蔽細節(jié)鬓椭;

  • 沒有Vim模式颠猴。而且即使有Vim模式聋庵,因為Typora屏蔽了一些標記元素,所以使用Vim也無法隨心所欲芙粱;

  • 渲染各種問題祭玉;

  • 其實也并沒有完美解決割裂的問題。因為一些Markdown文本標記還是被屏蔽了春畔,所以可以說Typora是以一種相對比較好接受的割裂感替換原生的割裂感脱货;

就這樣,我放棄了Typora律姨!

Vim

尋尋覓覓振峻,最后只能回到歷久彌新的Vim的懷抱!使用Vim來編輯Markdown择份,通過精心調(diào)教的語法高亮扣孟,我發(fā)現(xiàn)這種感覺比以往的都要好!在編輯模式我也能很清晰地看到文章的脈絡(luò)荣赶,能看到哪里是加粗的重點凤价,哪里是一個小標題。

接下來的三個月拔创,我就使用Vim來記錄筆記利诺。但Vim來記錄也有一些遺憾的地方:

  • Vim無法顯示網(wǎng)頁,因此只能通過外部瀏覽器來看到渲染后的效果剩燥;

  • Vim里面編輯無法顯示圖片慢逾,因此在含有大量圖片的時候,也只能回退到左邊Vim右邊瀏覽器的“實時預(yù)覽”的模式灭红;

重新認識Markdown

通過和其他的一些標記語言(如reStructuredText)的對比侣滩,不難發(fā)現(xiàn),Markdown作為一個輕量級的標記語言变擒,在設(shè)計的時候就是為了易讀性而犧牲了表達能力和嚴謹性君珠,選取一些有意義的標記以及非常有限的幾個元素,從而既能在純文本的時候易讀易寫赁项,也能在渲染后取得一個較好的排版功能葛躏。這樣使得用戶可以在編寫的時候專注于內(nèi)容澈段,無需關(guān)心排版和格式悠菜。

通過精心設(shè)計的元素高亮,清晰地向用戶展示文章的脈絡(luò)败富,這樣我們的目的不就也八九不離十了嗎悔醋?從這個角度(以及屏幕空間的角度)來說,”實時預(yù)覽“真的沒有必要笆薅!芬骄!我實在是不習慣在左邊修改一點后猾愿,又得在右邊定位并看看修改后的效果;也不習慣在右邊閱讀的時候账阻,發(fā)現(xiàn)一個錯誤蒂秘,然后到左邊來定位并修改。

因此淘太,VNote的設(shè)計理念就是: 采用精心設(shè)計的語法高亮姻僧,以及一些輔助手段,在不犧牲文本細節(jié)的前提下蒲牧,最大限度地減小Markdown編輯和閱讀之間的割裂感撇贺。

第一印象

因為時間迫切,VNote在設(shè)計和實現(xiàn)的時候冰抢,很多非本質(zhì)的東西都是采取”能用就好“的原則松嘶,因此使用默認的標題欄、菜單欄挎扰、工具欄和狀態(tài)欄翠订。所以總的來說是”樸實“路線。當然遵倦,也有很多用戶抱怨說界面太丑蕴轨,也有說是啥Windows 98式的界面(我覺得這種說法是極度不恰當?shù)模鸫a也是Windows XP吧骇吭?)橙弱。于是,我花了三周的時間來實現(xiàn)了VNote的主題功能燥狰,并定制了3套默認主題棘脐。

VNote主界面

調(diào)試樣式的過程真的是折煞我處女座啊龙致!色彩搭配這個東西蛀缝,真的不是說想學(xué)就能學(xué)得來的。不管怎么說目代,我對目前VNote的界面風格還是挺滿意的屈梁。我覺得作為一個筆記軟件,應(yīng)該將盡可能多的空間留給編輯和閱讀榛了,而不是一味追求所謂的美觀在讶。也可能是因為我是一個喜歡用Vim的程序員,也經(jīng)常左右分屏進行編程霜大,所以我是希望每一個像素都能物盡其用构哺。對于下面這些設(shè)計少漆,我只想說:節(jié)約用水禾唁,人人有責翁授!

浪費空間的設(shè)計1
浪費空間的設(shè)計2

文件管理

VNote提供了“筆記本-文件夾-筆記”的層級結(jié)構(gòu)涎拉。筆記本是受OneNote啟發(fā),對應(yīng)于一個賬戶碟嘴,如一個筆記本保存工作資料溪食,使用公司內(nèi)部網(wǎng)盤同步;一個筆記本保存學(xué)習資料娜扇,使用ownCloud來同步眠菇。一個筆記本對應(yīng)到文件系統(tǒng)上的一個目錄,把該目錄同步后袱衷,就能使用VNote在多個PC上編輯捎废。文件夾結(jié)構(gòu)對應(yīng)于筆記本目錄下的目錄樹。

因為VNote是在使用Vim來編寫筆記的過程中漸漸形成的致燥,所以VNote中所有數(shù)據(jù)都是純文本的形式登疗,其中的筆記能使用其他任意一個編輯器打開就能方便編輯。所以VNote也沒有將一個筆記放進一個獨立的文件夾中嫌蚤,否則辐益,當有其他編輯器打開的時候,層層疊疊的目錄足以讓人崩潰脱吱。

在文件管理方面智政,VNote提供的交互較為粗糙,比如重命名和排序等都需要后面的耐心打磨箱蝠。

編輯體驗

編輯體驗這塊续捂,我打算通過圖片來圍繞“編輯和閱讀的割裂感”展開說明。下面我會向大家展示一下同一篇文章在不同編輯器中的處理效果宦搬。

為知筆記

為知筆記

需要提一下的是牙瓢,我用的為知筆記是去年安裝好的版本。雖然不是最新版间校,但卻也符合我當初使用了幾年的體驗矾克,所以這里就不折騰最新版了。

在這張圖里面憔足,我們可以看到:

  • 為知在編輯的時候胁附,直接無視Markdown的標題語法。如果你想在編輯的時候有大綱目錄滓彰,那只能曲線救國控妻,對標題手動應(yīng)用富文本的標題樣式,例如圖中的標題二找蜜。我覺得這是使用為知編輯Markdown的時候饼暑,最為諷刺的一件事情稳析;

  • 為知使用HTML來保存Markdown文本洗做,所以里面的內(nèi)容可以應(yīng)用不同的樣式弓叛。于是,有一個可能是里面的行距诚纸、字體大小等會很凌亂(特別是在粘貼一段復(fù)制的HTML文本的時候)撰筷,時不時地需要手動清除一下格式;

  • 為知對于Markdown所有元素都是一視同仁畦徘、無區(qū)別對待的毕籽;一眼看上去,完全抓不往重點井辆;

  • 對于Markdown元素沒有任何提示关筒,即使是老手可能也會犯那么一點語法錯誤,需要切換到閱讀模式才能發(fā)現(xiàn)杯缺;

CMD Markdown

CMD Markdown

CMD Markdown(后面簡稱CMD)采用的是雙邊實時預(yù)覽的模式蒸播,“占地面積”比較大。這里我們先關(guān)注左邊的編輯模式萍肆。

  • 對不同的Markdown元素都有高亮著色袍榆,能容易地區(qū)別不同的元素,抓住重點塘揣,如標題包雀、加粗等都比較容易辨認;雞蛋里挑骨頭的話亲铡,標題的高亮沒有區(qū)別對待不同的層級才写;

  • 代碼塊沒有語法高亮;

  • 多文件切換比較麻煩奖蔓,需要點擊右上角的菜單按鈕琅摩,彈出一個文件列表;而且锭硼,文件切換慢人一拍房资;

Typora

Typora

Typora中編輯模式和閱讀模式幾乎完全重合,Markdown元素高亮檀头、代碼塊語法高亮轰异、圖片顯示等讓整個文章一目了然。但對于我來說暑始,有一點是矯枉過正的:鏈接搭独、圖片鏈接都被隱藏,需要將光標移到該元素才會顯示廊镜;畢竟是編輯模式牙肝,很多Markdown標記都被隱藏,如果需要編輯修改,總感覺中間多了一步配椭。

另外虫溜,Typora沒有Vim模式,即使以后支持了股缸,由于隱藏了很多標記衡楞,估計也很難協(xié)調(diào)。

VNote

VNote

從VNote的編輯界面敦姻,我們可以看到:

  • 在不隱藏細節(jié)的情況下瘾境,通過對Markdown元素有意義的標記(如不同層級的標題),使用文章脈絡(luò)非常清晰镰惦,一目了然迷守;

  • 圖片原地預(yù)覽,即使是編輯模式旺入,也可以無障礙瀏覽盒犹;

  • 樹形列表式的大綱,不止步于一段HTML眨业;

還可以看到一些從代碼編輯器借鑒過來的特性:

  • 相對行號急膀;

  • Vim模式;而且Vim模式還針輸入法進行優(yōu)化龄捡,在“正常模式”和“插入模式”之間的切換會自動禁用或啟用輸入法卓嫂;

  • 高亮末尾空格。因為Markdown基礎(chǔ)語法中是末尾兩個空格來換行聘殖,所以這個特性用在Markdown上還是挺恰當?shù)模?/p>

圖片

VNote支持直接從粘貼板粘貼插入圖片晨雳。VNote會將圖片保存到和Markdown文件同目錄的一個文件夾中。VNote也支持讀取粘貼板中的圖片鏈接并下載插入該圖片奸腺。

VNote插入圖片

編輯模式中餐禁,VNote會原地預(yù)覽圖片鏈接,從而最大程度地增加編輯模式中的呈現(xiàn)的信息量突照。原地預(yù)覽圖片的實現(xiàn)帮非,剛開始是在所有圖片鏈接旁插入一個代表圖片的特殊符號來顯示圖片。這種做法非常粗糙讹蘑,必須刻意去維護這些特殊符號末盔,例如不能保存到文件中、不能被用戶復(fù)制座慰、要刪除過期的特殊符號陨舱,而且有一個弊端,它會干擾用戶的修改歷史版仔。

用了一段時間游盲,實在受不了這種障眼法式的實現(xiàn)误墓,首先是重寫了QPlainTextEdit,通過一些小技巧益缎,在一個純文本的控件里顯示圖片谜慌,但后來發(fā)現(xiàn)滾動條還是針對行數(shù)而忽略了圖片的像素高;于是链峭,認真讀了QTextEdit相關(guān)的代碼畦娄,重寫了相關(guān)底層的類又沾,終于實現(xiàn)了現(xiàn)在的圖文并排效果(所以弊仪,開發(fā)者有強迫癥還是一件好事)。

快捷鍵

作為一個Vim使用者的重度鍵盤黨杖刷,我期望VNote中高頻的操作都能通過鍵盤來進行励饵。如何設(shè)計和安排快捷鍵是一個比較棘手的問題。在設(shè)計的時候滑燃,我還希望VNote的快捷鍵能盡可能不要干擾系統(tǒng)的快捷鍵役听。

首先,Vim模式是肯定要支持的表窘。剛開始的時候典予,我是自作聰明地實現(xiàn)了一個不倫不類的Vim模式,用戶先按Ctrl+D,然后進入一個臨時的Vim模式乐严,3秒內(nèi)接受Vim的移動命令瘤袖。后來,決定重構(gòu)昂验,自己實現(xiàn)一個高仿的Vim模式捂敌,后來用了7000多行的C++實現(xiàn)了一個具備基本功能的Vim模式。但那時候的Vim在普通模式是沒有塊光標的既琴。后來占婉,強迫癥發(fā)作,認真讀了Qt的一些代碼甫恩,總算巧妙地實現(xiàn)了塊光標逆济。

借鑒Vim,VNote引入了艦長模式磺箕,即通過一個前導(dǎo)鍵來實現(xiàn)一系列的快捷鍵序列纹腌。這樣,就可以有大量的按鍵資源可以分配滞磺。另外升薯,還有一個展覽模式,進入該模式后击困,各個主要部件都會顯示兩個字母涎劈,按下這兩個字母广凸,就能跳轉(zhuǎn)到對應(yīng)的部件上。

VNote展覽模式

從程序員中來蛛枚,到程序員中去

VNote的設(shè)計谅海、美工、開發(fā)蹦浦、測試以及首批用戶(我)都是程序員扭吁。所以,VNote的發(fā)展過程中盲镶,一直都是考慮如何借鑒代碼編輯器的優(yōu)秀特性侥袜、如何更好地滿足日常開發(fā)的需要。例如溉贿,在日常開發(fā)中枫吧,經(jīng)常需要臨時記錄一些信息(比如某個命令),于是VNote提供了一個“靈犀頁”宇色。

VNote還借鑒了以下特性:

  • 多標簽頁九杂;

  • 窗口分隔;

  • 片段宣蠕;

  • 元數(shù)據(jù)(幻詞)例隆;

  • 高亮當前行、所選詞抢蚀;

結(jié)語

開發(fā)了一年半镀层,我覺得VNote目前已經(jīng)超出我當時的預(yù)期了,例如當初完全沒想到會實現(xiàn)幾套皮膚思币。VNote幾乎占用了我所有的業(yè)余時間鹿响。作為一個開源項目,我一直都希望能吸引更多的人參與谷饿,像滾雪球一樣所項目“滾”起來(這也是為啥我一直沒有接受捐贈的原因)惶我。但目前基本還是我一個人來開發(fā)和維護,考慮到可持續(xù)發(fā)展博投,所以還是開始接受捐贈绸贡。順帶強調(diào)一下,Star or money, either works毅哗,流行度也是驅(qū)動開發(fā)者的強勁動力虑绵。

感謝所有支持VNote的用戶翅睛,特別感謝openSUSE黑竞、Arch Linux和macOS社區(qū)的熱心用戶幫忙打包檐涝。

最后幅聘,歡迎嘗試VNote惫企,或者這就是您想要的!

轉(zhuǎn)載自少數(shù)派

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子好芭,更是在濱河造成了極大的恐慌敬拓,老刑警劉巖厕诡,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件醒第,死亡現(xiàn)場離奇詭異形病,居然都是意外死亡司恳,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門钩骇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慢叨,“玉大人,你說我怎么就攤上這事。” “怎么了元咙?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長巫员。 經(jīng)常有香客問我简识,道長,這世上最難降的妖魔是什么颈走? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮捞奕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拄轻。我一直安慰自己院促,他們只是感情好,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布斧抱。 她就那樣靜靜地躺著常拓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪辉浦。 梳的紋絲不亂的頭發(fā)上弄抬,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機與錄音宪郊,去河邊找鬼掂恕。 笑死拖陆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的懊亡。 我是一名探鬼主播依啰,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼店枣!你這毒婦竟也來了孔飒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤艰争,失蹤者是張志新(化名)和其女友劉穎坏瞄,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甩卓,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡鸠匀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了逾柿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缀棍。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖机错,靈堂內(nèi)的尸體忽然破棺而出爬范,到底是詐尸還是另有隱情,我是刑警寧澤弱匪,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布青瀑,位于F島的核電站,受9級特大地震影響萧诫,放射性物質(zhì)發(fā)生泄漏斥难。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一帘饶、第九天 我趴在偏房一處隱蔽的房頂上張望哑诊。 院中可真熱鬧,春花似錦及刻、人聲如沸镀裤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽暑劝。三九已至,卻和暖如春茴扁,著一層夾襖步出監(jiān)牢的瞬間铃岔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留毁习,地道東北人智嚷。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像纺且,于是被迫代替她去往敵國和親盏道。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容