Markdown 預覽窗格在 MarkNode 中可以套用不同的主題樣式。你可以選擇內建外觀、讓預覽自動跟隨應用程式主題,或是自己撰寫 CSS,以符合文件最終發佈的平台樣貌。
跟隨應用程式主題
預設情況下,預覽會設為 跟隨應用程式主題:它會使用與你目前應用程式主題搭配的內建樣式,因此從 Paper 切換到 Midnight(或其他任何主題)時,預覽的配色也會一併變更。除非你想要與應用程式其他部分不同的外觀,否則完全不需要另外挑選預覽主題。
內建主題
MarkNode 內附一組所有使用者都能使用的內建預覽主題。它們是唯讀的、無法修改,但你隨時可以複製其中一個作為自訂主題的起點。除了與各個應用程式主題搭配的樣式(Paper、Midnight、Sepia、Nord、Solarized Dark、High Contrast)之外,還有依發佈平台與氛圍設計的外觀,例如:
- GitHub Light 與 GitHub Dark — 適合技術文件的 GitHub 風格排版
- Solarized Light 與 Solarized Dark — Solarized 配色
- Serif — 置中的襯線字體單欄版面,適合長篇文章
- Compact — 較緊湊的版面,適合資訊密集的參考資料
- Academic、Newsprint、Dracula 等等
內建主題的基本背景、文字、連結與框線顏色皆取自你目前啟用的應用程式主題,因此在淺色與深色模式下都能正確呈現,無需重新挑選。(另外還有一個內部的 Default 樣式,作為 跟隨應用程式主題 的底層;你應在選單中選擇「跟隨應用程式主題」,而非直接選擇「Default」。)
若要切換主題,請點擊預覽窗格標題列中的 預覽樣式 按鈕,或在預覽區域任一處按右鍵並使用樣式清單。選擇 跟隨應用程式主題 可再次跟隨應用程式主題,或選擇任一特定樣式來固定它。變更會立即套用至所有預覽介面——包括編輯器旁的停靠預覽,以及任何你已取消停靠的預覽視窗——並且會在下次啟動時保留。
建立自訂主題
在預覽樣式選單中,選擇 以此樣式建立新樣式…,即可以目前啟用的主題為基礎建立自訂主題:
- 為新主題輸入名稱。名稱不得與內建主題名稱相同。
- CSS 編輯器會開啟並預先填入原始 CSS——你可以依喜好編輯。
在你輸入的同時,預覽會即時重新算繪。CSS 在儲存前僅保留在記憶體中,因此你可以放心實驗;若改變主意,只要關閉編輯器即可捨棄編輯內容。
若要編輯已建立的自訂主題,請選取它,並從同一個選單中選擇 編輯目前樣式…。
儲存與分享
當你儲存自訂主題時,它會存放在你的全域主題庫中,因此本機上的每個專案都能使用。你也可以勾選 在目前專案中儲存副本,將它寫入專案中,讓主題隨專案一起流通。若你將專案納入 Git 版控,每位複製該儲存庫的協作者都會看到相同的預覽效果。
當你開啟的專案含有你尚未擁有的自訂預覽主題時,只要該專案處於開啟狀態,該主題就會出現在你的樣式清單中。
自訂 CSS 可以調整哪些樣式
自訂 CSS 的作用範圍僅限於預覽容器(.markdown-preview),因此不會影響編輯器、側邊欄或 MarkNode 的其他任何部分。你可以調整:
- 內文字體與大小
- 標題、清單、引用區塊與表格
- 程式碼區塊、行內程式碼與語法高亮顏色
- 間距、內距與內容最大寬度
若你希望自訂主題能像內建主題一樣自動適應淺色與深色模式,請從複製某個內建主題開始——你的副本會繼承該主題的主題感知基礎,之後再從中調整即可。
由於 CSS 只能調整視覺呈現,無法變更底層的 HTML,因此無法進行大幅度的 DOM 結構重組。
刪除自訂主題
選取自訂主題,並使用樣式選單中的刪除動作。系統會先顯示確認提示。若你刪除的是目前啟用的主題,MarkNode 會回復為預設的內建主題。內建主題沒有刪除動作,無法被移除。