Mawy
把 Markdown 的編輯與閱讀做進同一個函式庫,同時以 React 函式庫與 Flutter 套件提供。可以對著排好版的文件寫,也可以切到原始碼寫,兩者只隔一次點擊;寫完的文件交給唯讀的閱讀器,呈現出來一模一樣。
關於這個專案
Mawy 把 Markdown 編輯器與閱讀器做成了同一個函式庫,並同時以 React 函式庫與 Flutter 套件提供。編輯器和另行維護的算繪器遲早會在某處不一致——一張表格、一層巢狀清單、一個程式碼區塊——那一刻,作者確認過的文件就不再是讀者拿到的文件。這裡兩邊共用同一個剖析器與同一個算繪器,所以敲進去的就是讀到的。
編輯器不是兩個編輯器,而是同一份文件的兩種檢視。帶語法著色的 Markdown 原始碼與排好版的文件只隔一次點擊,格式工具列上的每個命令同時也是一個快速鍵,來回切換不會丟掉另一種檢視表達不了的東西。著色層底下是一個真正的 textarea,所以瀏覽器自帶的復原紀錄、輸入法的組字與行動裝置鍵盤都照常運作。閱讀器本身就是一個完整的閱讀畫面:字體、字級、行高、字距、欄寬、亮色與暗色配色,以及一份標題大綱——沒有一項會改動文件。如果不給它文件,它就是一個檔案選擇器,把 .md 檔案拖上去就是它空狀態的用處。
安裝是一個套件加一行 CSS。這個函式庫畫出來的一切都經過 --mawy-* 自訂屬性,所以換主題是在外層元素上重新宣告一個自訂屬性,而不是靠更高的優先序去壓過某條規則,深色模式也只是其中之一。它不向外取任何東西:字體選單給出的是讀者機器上已經有的字體,隨套件附帶的十三款自由授權字族只有在應用程式主動傳入時才會用到。Markdown 變成的是元素而不是一串 HTML,所以文件與頁面之間沒有 innerHTML。React 套件僅提供 ESM,附帶 TypeScript 型別宣告,執行階段相依套件只有工具列圖示用的那一個。
功能
文件網站
TypeScript 型別
多語言支援
經測試驗證
跨平台支援
內建無障礙支援
深色模式
支援搖樹優化
