vscode編寫markdown

noonafter發表於2023-09-27

1. 需求分析

最近在網上折騰了好久Markdown的寫作環境,作為一個普通使用者,總結一下個人對於Markdown寫作環境的幾點需求。由於本人剛接觸Markdown不久,因此,需求也比較簡單,想看具體搭建步驟的可以直接跳到第二章環境搭建

  1. 本地儲存。這一點主要是出於隱私要求,由於記錄內容和個人強相關,以目前的網路環境來看,檔案存在本地最為安全。
  2. 雲端同步。這一條和第一點並不矛盾,在作者想要釋出的時候,能夠方便地將文件釋出到雲端,不想釋出的時候,只在本地儲存,而當雲端文件發生變化時,也能及時pull到本地。
  3. 實時預覽。所寫即所見,寫出來的同時能夠看到效果,這對於修改和寫作非常重要!反之,沒有預覽效果,使用者難以把握最終完成效果。部分編輯器雖然有預覽的功能,但預覽需要手動點選或執行快捷鍵操作,這種非實時的預覽,會導致使用者在寫作時,注意力不斷被打斷,寫作體驗非常不流暢。
  4. 同步滑動原文定位。當文件過長時,預覽和原文往往很難對應起來,這表現為兩個方面:
    • 編輯或修改完原文之後,不知道最終預覽情況,這個時候原文和預覽同步滑動,可以幫使用者快速定位到當前編輯的位置,並檢視預覽效果。
    • 當使用者發現預覽沒有達到預期效果,並嘗試進行更改時,如果預覽不支援反向定位到原文,那麼使用者可能會花費很長的時間才能找到原文中對應的位置。
  5. 工具欄。雖然Markdown語法簡單,容易學習,但是對於普通使用者來說,依然存在學習門檻,而且一段時間不使用的話,語法和快捷鍵操作很容易忘記。如果編輯器有工具欄,那麼使用者的學習成本就大大降低了。畢竟大多數使用者並不是經常寫作,而且工作生活中需要學習的東西已經太多了,即使是簡單的語法,對於普通使用者來說,學習成本也會很高(學習成本並非線性增長)。
  6. 圖片上傳。在使用各類編輯器之前,我原以為這是一個非常常規的需求,然而網上各類方法對於這個功能的實現並不理想。
  7. 背景顏色可變
  8. 支援表格,流程圖等語法
  9. 目錄生成,也稱TOC生成。

2. 環境搭建

總體思路是,採用vscode作為文字編輯器,同時利用各類外掛,實現以上各類需求。vscode的安裝這裡就不贅述了。這裡重點介紹使用到的Markdown外掛。

  1. Markdown All in One。支援實時預覽,同步滑動,快捷鍵,目錄生成等各種功能。開啟命令皮膚,在其中輸入mio,可以快速查詢該外掛支援的各種命令。
  2. learn-markdown。微軟官方推出的markdown外掛,對於小白而言,最好用的是有一個工具欄常駐在狀態列裡,避免記憶常用的快捷鍵。
  3. 部落格園cnblogs客戶端。部落格園推出的官方外掛,借用該外掛可以實現圖片上傳,雲端同步的功能。
  4. Markdown TOC & Chapter Number。支援右鍵目錄生成,標題編號。如果熟練使用了Markdown All in One的目錄生成功能,該外掛可選。
  5. Markdown Theme Kit。微軟官方推出的markdown外掛,支援幾種markdown主題,當然也可以直接改變vscode的theme。

以上外掛均為本人親測後,感覺使用體驗良好的外掛,如果大家還有用過不錯的外掛,歡迎推薦和交流。