功能價格文件部落格
取得 mote
← 部落格
設計·2026年6月23日·閱讀時間 4 分鐘

即使切換模式,文件仍是同一份

開啟預覽時,是否覺得視窗被一分為二,而切換模式時,文件又像是重新開啟了一次?mote 的即時、原始碼、閱讀模式,是觀看同一個緩衝區的三種視角,因此切換時不需要轉換、儲存,也不會重新解析。

m
mote
將同一份文件以即時、原始碼、閱讀模式並排顯示的畫面。左側隱藏了符號,中間顯示檔案原貌,右側則是移除符號後的渲染結果。
將同一份文件以即時、原始碼、閱讀模式並排顯示的畫面。左側隱藏了符號,中間顯示檔案原貌,右側則是移除符號後的渲染結果。

Markdown 編輯器通常會把畫面分成兩半。在左邊撰寫,在右邊查看結果。由於同一份文件要繪製兩次,因此必須持續同步捲動位置與選取位置。

mote 採用了不同的做法。只保留一份文件,僅切換觀看方式。

一份文件,三種畫面

mote 有三種模式。

  • 即時(Live):隱藏符號並直接顯示格式。
  • 原始碼(Source):原樣顯示儲存在檔案中的內容。
  • 閱讀(Reading):顯示完全移除 Markdown 符號後的結果。

核心會讀取文件並建立裝飾項目清單。種類只有三種:要在哪個區段套用樣式、要隱藏哪個區段,以及要用小工具取代繪製哪個區段。

三種模式是對這份清單套用不同篩選器後的結果。即使切換模式,也不會重新開啟或分析文件。區塊樹與行內結果都會保持原樣,只更換篩選器。

效能預算中也有這樣的規定。模式切換必須在一個影格與切換動畫內完成。如果過程中發生重新解析,就算違反規定。由於切換成本不會隨文件大小增加,即使是大型文件也能以相同速度切換。

游標與選取範圍也會保持原樣。在原始碼模式中編輯的文字,到了即時模式仍位於同一位置;在即時模式中選取的句子,切換至原始碼模式後也仍維持選取。

這並不是移動到文件的另一份副本,而是以不同的視角觀看同一份文件。

撰寫、確認、閱讀

撰寫文章時,即時模式很方便。畫面上只留下內容,Markdown 符號會在游標移至該處時出現。表格、數學式與圖片會以小工具形式在原位繪製。你可以一邊查看格線,一邊修改儲存格內的內容。

需要連符號也精確確認時,可以使用原始碼模式。這很適合用來確認表格的豎線是否錯位、程式碼區塊是否已關閉,以及行尾是否有空白字元。

閱讀模式是查看最終結果的畫面。它不只是隱藏符號,而是將符號從畫面中完全移除。列印與 PDF 也會以這個畫面為基準產生。雖然無法編輯,但可以選取與複製,也能開啟連結。

以閱讀模式開啟的版本說明。沒有 Markdown 符號,行內數學式與區塊數學式都顯示在原位。
以閱讀模式開啟的版本說明。沒有 Markdown 符號,行內數學式與區塊數學式都顯示在原位。

建立閱讀模式的過程並不簡單。因為移除符號後,畫面上的位置與檔案中的位置變得不同了。搜尋結果會向旁邊偏移,點擊的位置也會與游標位置錯開。

現在核心會同時記錄已移除字元的位置與長度。如此一來,就能將畫面上的點擊位置轉換回檔案中的精確位置。

直接在閱讀的位置切換

按下標頭中想要的模式,或使用 Ctrl+Shift+123 即可。

即使切換模式,畫面的第一行與游標位置也會保持不變。交叉淡化是一段 160ms 的有限動畫,結束後不會留下任何排程。新視窗要以哪種模式開啟,可以在設定的編輯分頁中選擇。

快速鍵曾經歷過一點小插曲。有一段時間,操作說明寫著 Ctrl+1/2/3 是模式切換鍵,但實際上那是建立標題的快速鍵。視窗會先接收按鍵輸入,因此模式切換程式碼並未執行。

現在已經明確區分各自的用途。Ctrl+Shift+1/2/3 用於切換模式,Ctrl+1Ctrl+6 則用於標題。命令面板、快速鍵清單與網站文件也都已修正為相同內容。

專注模式輕輕疊加在畫面上

按下 F8,就只會清楚顯示游標所在的區塊。其餘各行只會將文字的 Alpha 值降至 32%。

只有顏色會改變,文字的位置不會移動。由於也沒有模糊效果或動畫,因此在不同段落間移動時,不需要重新計算整個畫面。

專注模式並不是第四種模式。它是疊加在即時畫面上的選項,因此可以在開啟的狀態下移動到其他模式。

開啟專注模式的即時畫面。只有游標所在的清單清晰可見,其餘內容則在相同位置淡化顯示。
開啟專注模式的即時畫面。只有游標所在的清單清晰可見,其餘內容則在相同位置淡化顯示。

不將畫面一分為二的理由

mote 沒有分割預覽。

如果將同一份文件繪製兩次,就必須同步捲動位置、移動選取範圍,並管理兩個畫面的狀態。mote 從一開始就決定不製造這個問題。

復原記錄、選取範圍與捲動位置也都只有一份。

之所以有三種模式,並不是因為有三份文件。而是因為有三種需要觀看同一份文件的時刻。

← 較舊拖慢效能的不是 Markdown,而是網頁引擎較新 →在單一 Rust 核心上搭配各平台外殼的理由
透過 RSS 持續關注。
只留下文字。
繁體中文
© 2026 mote