by Philippe Donn from Pexelsby Philippe Donn from Pexels

曾經在〈不離開 Medium,我自架 blog 的理由與選擇(下)〉一文的接近尾聲處留了一個很明確的伏筆,那時是這樣說的:

從前面看下來,你是否覺得有點奇怪,我明明一開始說不愛用 Markdown 寫作,怎麼最後卻是選了基於 Markdown 的靜態框架?

簡言之,我找到了用 Markdown 寫作的折衷方式。這部分細節不少,請容我再另闢一篇討論,因為它確實滿重要的,也會影響你寫作的舒適度,最終決定你能否長期運行與產出。

這伏筆現在終於要來認真回收了——具體說明何謂「Markdown 寫作的折衷方式」。

不愛 Markdown,只愛編輯器的我

在前述文章的開頭部分我提及過,當初在考察自架部落格方案的時候,相當程度受到了《星箭廣播》的影響,他們因為「古騰堡編輯器」這個主要賣點,毅然決然選擇了移居 WordPress。對此我還表示:

寫作上,我也是傳統編輯器的高度依賴者,雖然是軟體工程師,但我並不愛寫 Markdown,對我來說,還是編輯器最棒了!

並非沒試過用 Markdown 來寫作,比如 macOS 上的寫作軟體 Bear 我也付費過一段時間,但還是不太習慣沒有編輯器與按鈕的模式,可能是從 Evernote 以來就養成的習慣,積習難改?

  • 2022/03/04:萬萬沒想到,最近我又把 Bear 裝回來還重新付費了,而且用得還挺愉快,完全取代了 Evernote 的地位,並補足了 Notion 的「不足」,對此,請容我再埋另一伏筆,待日後累積一些心得再行分享。

回到主軸,話雖如此,最後卻選擇了必須使用 Markdown 的 Hexo 而不是自帶編輯器的 WordPress,主要原因有好幾個(比如耗用資源與架構簡潔度),而其中和本篇最相關的原因便是:我找到可以不那麼痛苦地寫 Markdown 的方式了!

換句話說,如果沒有滿足這個條件,我應該會選用 WordPress。

我試過的 Markdown 寫作方案:專屬編輯器選擇

要講最終採用的方案,就不得不先聊聊那些我試過但沒有持續的方案。

確定部落格形式為 Hexo 後,我首先要考慮的便是怎麼用 Markdown 寫作了!畢竟 Hexo 本質上就是一個幫你把 Markdown 文件渲染成網頁的框架。我嘗試過的方案主要分為兩大類:

  1. 輸入後即原地渲染的編輯器:BearTypora
  2. 一邊是 Markdown,另一邊是渲染後畫面的編輯器:VS CodeHackMD

這裡所謂的「渲染」,指的是把 Markdwon 標籤轉換」為被標記的文字所對應顯示的樣式的過程。

什麼意思?不是說不用編輯器嗎?

Markdown 編輯器

首先要說明的是,Markdown 即使用「記事本」這種陽春的軟體也能進行撰寫,只是很不直觀而已,所以我們通常還是需要專屬的編輯器

而這裡的「編輯器」和前面講的內涵又有點不同,因為它是專門 for Markdown,所以原則上不會出現 UI 有一個「粗體 B」的按鈕——讓你反白文字後可以按——這種比較傳統的編輯器設計。

相對的,這些 Markdown 編輯器的共通特色是「重視渲染結果的呈現方式」,以彌平 Markdown 本質上不是「所見即所得」的困擾。

頁面在渲染前後看起來並不相同(從純文字變成帶有樣式的網頁),所以並不算所見即所得。可參考下面的 HackMD 界面圖片。

而根據不同的呈現手段,我個人會把它們大致分成「原地渲染型」和「畫面分割型」。

原地渲染型編輯器

講到 Markdown 編輯器,Typora 是很多人愛用的經典,界面簡約優雅,也是我最早接觸的編輯器。分類上,它屬於我所謂的「原地渲染型」。只要看下圖就能明白我說的「原地渲染」究竟是指什麼:

來源:typora.io來源:typora.io

沒錯!就是輸入完文字內容並加上 Markdown 標籤符號後,內容的文字會立刻產生對應的樣式效果!也就是立刻渲染。

這或許是最主流的方式,簡潔且相對直觀。但對我而言還不夠!我的目標只有一個:那就是完全不必輸入 Markdown 符號!

這些編輯器雖然都會提供鍵盤快捷鍵,但有時候還是得自己輸入 Markdown。

畫面分割型編輯器

顧名思義就是一邊是「原始 Markdown 文本」而一邊是渲染後的畫面,兩邊同步更新,讓你所見即所得!很像前端工程師在寫靜態網頁的感覺。

講到此類就不得不提 HackMD 這個服務了,從下圖中可以看出,它不僅有分割畫面,甚至還自帶了簡易的「編輯功能選單」,懶得自己打前後雙星號**來加粗字體?連快捷鍵Ctrl+B都不想記?沒問題,直接給你一個「B」鈕讓你按!算是照顧到了用習慣傳統文書編輯功能的使用者。

HackMD 的「所見即所得」編輯器HackMD 的「所見即所得」編輯器

當然,完整的快捷鍵支援一定是不可少的。此外,它還為原始 Markdown 頁面加上了「syntax highlight(語法突顯)」,讓你使用時在視覺上更加舒適、好辨識。

以上功能除了「編輯選單」外,VS Code 基本也都有,所以不少人直接以 VS Code 作為自己的主要 Markdown 編輯器。我也算其一,只是使用上還附帶個「前提」而已。

總之,因為有 VS Code,我最終也沒使用 HackMD,尤其每一個 Hexo 部落格本質上就是一個 git 倉庫,用 VS Code 打開來編輯、管理自己 Hexo 所有文章更是直覺且方便!


我的選擇:Notion + VS Code

雖然我用 VS Code 來管理、修改部落格文章,但是前面也提到,VS Code 並沒有「編輯功能選單」可以讓你按,而我又是超級討厭打 Markdown 語法的人,所以實際上,我的文章草稿並不是在這裡完成,而是使用我最喜歡的 Notion。

以下為 Notion 中,本文的草稿一隅:

可以看出,常見的 Markdown 元素——標題、連結、引用、清單——都有支援,畢竟它完全相容 Markdown!(除了 Notion 特有的 block 元素,比如 Database、Callout 等等)

和 VS Code 不同的是,Notion 本質上還是較多面向傳統使用者,使用上並不要求你熟悉 Markdown 語法——當然會的話更好,且編輯時並不完全支援直接輸入 Markdown 標籤,而是更推薦使用快捷鍵。

在對文字選取反白後,也會有簡易的編輯功能選單。所以使用上還是偏向傳統編輯器概念,只是絕大部分常用功能都能靠快捷鍵即可完成。

Notion 編輯功能選單Notion 編輯功能選單

基於對 Notion 快捷鍵的熟悉,以及一些細節操作上的便利,我選擇用 Notion 而非 VS Code 撰寫文章草稿——因為完全不需要用到任何 Markdown 符號。

簡言之,Notion 擁有整合性極佳的編輯器!可快鍵、可選單,功能上相當程度地取代了我原先對古騰堡編輯器的需求。更別說我大部分的文字產出都已經用 Notion 在管理,它自然成為寫作起手式的不二之選。

具體寫作流程

所以我寫一篇文章,工作流程如下:

  • 在我的 Notion 的「文章 Database」新增一筆資料,把文章相關的資料先填上,如下圖:
  • 開始寫文章!過程中不需使用 Markdown,不過需要記一些簡單的快捷鍵。
  • 寫完後,我會先看一兩次稿,把可以修的地方修完,因為複製貼上到 VS Code 上後,接下來的修改就都要使用 Markdown 語法了。
  • 複製 Notion 上的全部內容,使用 Hexo 指令新增文章的 Markdown 檔案,在 VS Code 中打開,將內容全部貼上,並將文章頁所需的資料填一填,比如所屬的分類、標籤等等,如下圖:
  • 圖片連結修正:雖然從 Notion 貼上可謂是無痛轉換,可惜 Notion 圖片的存放網址是自有的 AWS S3 空間,這個圖片連結在 Notion 以外的地方是打不開的!
    • 方法:透過 VS Code 套件,在編輯器中以「複製/貼上」方式上傳圖片到 imgur,完成後會自動取得圖片路徑。
    • 套件名稱:Markdown Image。必須使用你自己的 imgur 帳號,套件只是幫你做好 API 串接,但真的非常實用!過程中完全不需要登入 imgur。
  • 使用hexo server指令打開本地頁面,看一下顯示效果如何,確認 OK 後就可以上傳文章頁面至 GitHub Pages 了。

工具的角色分工

寫個文章要用到兩個工具,看起來有點麻煩,不過它們在功能上確實有各自擅長的部分,扮演著不同的角色,對我實在缺一不可。

Notion
寫作靈感收集箱、草稿存放區與寫作進度管理。

我的 Notion 寫作 database我的 Notion 寫作 database

VS Code
Hexo 整合與編輯所有已上傳發表的 blog 文章。

值得一提的是,文章發表後,還是很可能有需要修改的需求,此時我只會在 VS Code 中直接用 Markdown 語法進行修改,而 VS Code 作為前述「畫面分割型編輯器」的特色,在這裡就顯得格外重要且實用!

小結:我只是想要寫個文章啊!

終於把這個坑給填上了,可喜可賀 😌

不得不承認,為了能實現心中「盡可能不打 Markdown 標籤」的願望,整個流程顯得有些複雜,但我確實也透過這流程,半年來寫了超過 20 篇文章,目前還算是一個合格的折衷方案。

工具畢竟只是一個參考,只要適合自己就好,能夠持續就稱得上是好選擇。待我再寫個 30 篇,看看是否還有簡化的可能!