
1. 從源碼預覽到即時渲染Markdown編輯體驗的進化節點如果你寫過一段時間 Markdown大概率經歷過這樣的場景左邊是密密麻麻的#、*、[鏈接文字](地址)右邊是預覽區一邊寫一邊眼睛來回掃。寫了一上午眼睛酸不說最難受的是當你在源碼里插入一張圖片時要等預覽區刷新完才發現圖片路徑寫錯了。這種分裂式寫作體驗幾乎成了 Markdown 用戶的默認日常。Markweave 這類 Markdown-first WYSIWYG 編輯器做的正是把這套源碼預覽的雙欄模式徹底干掉。你打開它看到的就是一篇排版完成的文檔一級標題就是大號字加粗列表就是帶圓點的列表引用就是灰色塊。但你的底層文件依然是標準 Markdown 語法只是編輯器在輸入過程中實時把語法渲染成了視覺樣式然后把光標藏進這些已經好看的文字里。這背后涉及的遠不止渲染層那點事。真正難啃的是光標模型和語法樹的聯動當你在一個渲染好的標題行末敲回車下一行該繼承標題級別還是回到正文當你在任務列表的[x]方括號上做刪除操作是按字符刪還是把整個方括號狀態切換掉這些問題如果處理得粗糙用戶就會遇到光標跳來跳去排版突然錯亂之類的體驗翻車。所以標題里的Markdown-first值得劃重點。它跟那種支持 Markdown 導入的在線文檔不是一回事。Markdown-first 意味著 Markdown 源文本才是數據的唯一真實來源WYSIWYG 只是它的展示層和編輯層。用戶在界面上做的每一個加粗、每一處列表縮進最終都被反向映射回 Markdown 文本里的對應語法片段。這跟 Notion 那種塊編輯器存 JSON 結構Markdown 只是導入導出格式的思路在設計哲學上截然不同。這個項目的目標用戶其實很明確一類是被雙欄模式折磨得夠嗆的 Markdown 老手想要 Typora 式的沉浸感但又希望編輯器本身足夠輕、可定制、數據完全在自己手里另一類是剛入門 Markdown 的新用戶他們不想記一堆語法規則只想像用 Word 一樣排版但在需要的時候又能摸到源文本。這兩種需求看起來矛盾Markweave 的 Markdown-first WYSIWYG 路線恰好把它們統一到了同一個文件格式上。2. 深入 Markweave 的編輯器引擎語法樹、光標模型與雙視圖同步2.1 源碼文檔與渲染視圖之間的雙向映射機制要理解 Markweave 的內部邏輯可以把它想象成一個文檔的兩層皮。底層是 Markdown 源文本它是一個長字符串上層是經過解析得到的語法樹和渲染后的 DOM。編輯器引擎要維護這兩層之間的一一對應關系。工程上常見的做法是給每個語法節點加上位置信息。比如## 二級標題解析器會標記出##是標記符后面的文字是內容兩個部分加在一起形成 heading 節點各有起始偏移量。當光標在渲染后的標題文字中間閃動時編輯器需要把光標在 DOM 中的位置換算回源文本的偏移量這樣才能在用戶輸入時準確地把字符插入到源文本里。Markweave 在這塊的看點是它對部分語法的處理。正常的解析器遇到####這樣的半截語法要么報錯要么當純文本。但在即時渲染模式里用戶正在敲第 3 個#還沒敲第 4 個這時候編輯器既不能立刻把它渲染成標題也不能當成純文本顯示出來讓用戶覺得壞了。Markweave 的做法是通過增量解析在輸入流處于不完整狀態時把當前節點標記為未閉合或暫存等用戶繼續輸入補齊語法后再完成最終渲染。2.2 行內語法與光標定位的復雜場景行內語法是 Markdown 解析里最容易出 bug 的地方也是 Markdown-first WYSIWYG 和傳統雙欄編輯器拉開體驗差距的關鍵。以前寫**加粗**你看到的是一對星號加文字。在 Markweave 里你敲下**時星號會消失光標后面的文字變成粗體。這時候問題來了光標已經掉進了粗體文本內部如果此時用戶再敲一個*Markweave 是把它當作加粗結束的標記還是一段普通文字這需要編輯器時刻記錄當前光標處于哪個語法節點的內部以及這個節點處于已閉合還是未閉合狀態。更刁鉆的是嵌套場景。在一段文字里既有**粗體**又有[鏈接](地址)還有inline code甚至鏈接文字本身又是粗體的。每一層節點疊加光標的插入位置判斷就需要遍歷整棵語法樹的分支。我在用 Markweave 寫技術文章時專門試過在一個列表項里寫一段引用引用里再嵌一個行內代碼代碼里還有反引號和星號。它能正確渲染但光標在反引號包圍的區域內左右移動時偶爾會出現一次性的跳動這是節點邊界處理時的回調滯后導致的不頻繁但能感覺到。2.3 即時渲染的性能策略這里必須要提一下性能設計。WYSIWYG 編輯器最大的性能殺手是每次擊鍵都全量重新解析整個文檔。Markweave 的應對思路是分層失效輸入時先判斷光標所在的塊級節點標題、段落、列表項是哪一塊只對這一塊的內容做塊內重新解析和局部渲染如果本次輸入涉及跨塊操作比如在列表中間按回車拆出一個新段落則沿著語法樹向上找到最近的公共父節點從那里往下重新渲染。這套邏輯說白了就是能修補就不重建。實際效果上一個幾萬字的長篇技術文檔在輸入時能明顯感覺到按鍵延遲要比純源碼編輯器高一丁點但整體處于可接受范圍。如果拿瀏覽器自帶的 MutationObserver 去觀察 DOM 變化你會發現數據量并不大因為唯一變化的只會是光標所在的當前塊。3. 實操走一遍從安裝到產出一篇帶標題、表格和公式的文章3.1 環境準備與安裝方式Markweave 的安裝比較簡單我的建議直接看項目 README 里的 release 頁面。它提供三個渠道桌面客戶端、瀏覽器在線版和通過 npm 安裝為本地 Web 應用。桌面客戶端適合每天要寫長文的人啟動快、文件系統權限不受瀏覽器限制。我在本機的實踐是直接用 npm 安裝然后作為 Web 應用跑在 localhost8080 上。這種方式的好處是可以配合自己的代碼工作區使用寫 Markdown 時順手就把旁邊的 JS 文件改了。啟動起來之后Markweave 默認會打開一個歡迎文檔。這個歡迎文檔本身就是一篇 Markdown里面介紹了快捷鍵、語法支持和配置項你可以直接選中它按刪除鍵清空然后開始寫自己的內容。第一次使用的人建議先在這個歡迎文檔上練習因為它把語法示例寫得很全省得你逐個翻文檔。3.2 基礎編輯操作與常用快捷鍵新用戶最需要記住的是避免強迫自己繼續敲 Markdown 符號。在 Markweave 里加粗有三種方式直接按Ctrl/Cmd B選中的文本立即變粗源文件里自動寫入**手敲一個*再敲一個*編輯器會補全配對的**光標落在中間選中一段文本在浮出的迷你工具欄里點 B 按鈕。段落操作方面最有價值的是按Ctrl/Cmd 方向鍵調整列表項的層級關系。在普通 Markdown 編輯器里縮進列表要通過先刪除空格再重新輸入的方式處理。在 Markweave 里光標停在列表項開頭按一次Tab降級縮進按Shift Tab反縮進渲染視圖和源文檔會同步更新對應層級的空格數。Markweave 對表格的支持是我比較滿意的部分。在源碼模式下寫一個表格對齊線是個折磨人的事。在 WYSIWYG 模式下你可以像用 Excel 一樣直接按Tab在當前表格里跳到下一個單元格輸入完內容后回車會新建一行。編輯器自動替你計算每列的對齊和寬度。如果你經常需要把 Markdown 表格復制到 Word 或發布到公眾號后臺這個能力非常省心因為它生成的是標準 GFM 表格語法不依賴擴展插件。3.3 主題定制與導出配置Markweave 的樣式層基于 CSS 變量做的主題系統。你可以在設置面板直接改字體、字號、行高、代碼塊配色這些設置會寫入當前工作區的配置目錄。如果你是一個看主題不順眼就想改的人建議直接編輯markweave.theme.css里面每個變量都有注釋改起來沒有門檻。導出這一塊說實話 Markdown 編輯器的導出歷來是重災區。很多編輯器導出成 PDF 時中文字體不是缺失就是錯位。Markweave 在這方面走的路線是委托瀏覽器打印能力。你調用導出 PDF 時它其實是調用 Chromium 的打印接口所以導出的結果和你在編輯頁面看到的幾乎一致。我實測過導出包含中文和中英文混排的文檔字體方面只要你的操作系統裝了中文字體導出就沒問題。另外它也支持直接導出為純.md文件和帶樣式的 HTML 頁面后者特別適合快速做批量的文檔站網頁化。4. 我踩過的坑Markdown-first WYSIWYG 在實際寫作中的邊界4.1 表格內的多行文本與br處理第一個撞上的問題是在 Markdown 表格的單元格里無法完成復雜的塊級排版。Markweave 支持在 WYSIWYG 視圖下編輯表格但它依然受限于 Markdown 表格的語法能力。比如我在一個單元格里寫了兩行文字想要一個換行這時候 Markweave 會在生成的 Markdown 里插入br標簽。這在渲染時沒問題但如果你把這份 Markdown 拿到別的平臺發布某些平臺的安全過濾器會直接把br過濾掉導致表格里的換行消失。我的處理方式是遇到表格內需要折行的場景盡量只放短語或代碼片段不放長段落。長段落拆到表格外面的正文區域寫或者改用引用塊搭配列表來組織信息完全繞開br的兼容性問題。4.2 Git 協作時 CRLF 換行符引發的震蕩這個坑不是 Markweave 獨有但因為它默認你直接編輯源文件所以坑得比較深。在 Windows 上Markweave 默認保存文件時會帶上\r\n在 macOS 和 Linux 環境下則保留為\n。如果你在一臺 Windows 機器上用它寫完文檔提交到 Git 倉庫然后隊友在 macOS 上打開Git 的autocrlf設置如果沒配好整個文檔會被判定為全部行都有變動diff 出來一團糟。后來我統一在項目根目錄加了.gitattributes文件聲明*.md text eollf并且把 Markweave 的保存設置里換行符改成了 LF。這樣無論在哪臺機器上編輯提交到倉庫里的 Markdown 文件始終是 LFdiff 就干凈了。如果你正在用 Markweave 寫個人筆記且不同步到 Git倒不用操心這個。4.3 大文檔的性能與自動保存機制Markweave 對單文檔大小的容忍度我的實測是在 2 萬字以內表現良好超過 5 萬字的長文比如寫整本電子書或者畢業論文會出現兩個問題一是大幅度的滾動時渲染會有肉眼可見的遲滯二是自動保存觸發時如果文檔里圖片是 base64 內嵌的保存操作會造成短時間的界面卡頓。這里建議用 Markweave 處理超大文檔時把圖片改為外鏈路徑不要直接粘貼嵌入。同時開啟自動保存后把間隔時間調成 30 秒左右既能保證不丟稿也不會因為保存太頻繁打斷心流。我已經把寫長篇技術教程的流程改成單個章節一個文件用 Markweave 寫內容最后再用腳本把所有章節拼接成一篇大文檔這樣就把單文件性能問題繞開了。5. 和主流編輯器放一起比一比Markweave 的定位與選型建議5.1 與 Typora、Obsidian、Notion 的橫向對比把這四樣東西放一起出發點完全不同但用戶在選擇時確實會糾結。我自己的體會是按對 Markdown 源文件的控制力排序是Markweave Typora ≈ Obsidian Notion。Typora 是 Markweave 最直接的競爭對手。兩者在即時渲染這一核心交互上高度相似但 Typora 是閉源的主題生態成熟Markweave 是開源的有自己獨特的 API 擴展能力。在寫作體驗的打磨上Typora 經過多年迭代細節更細膩Markweave 則在功能的透明度和可定制性上占優。Obsidian 也可以做到所見即所得但它的根基是知識庫雙向鏈接強調筆記之間的網狀關聯編輯器只是它整個系統的一個模塊。而 Markweave 更純粹它就是要當一款稱職的 Markdown 編輯器做深這一件事。Notion 的 WYSIWYG 體驗極佳但底層是數據庫模型內容天然綁定在它的服務里。如果你追求所有筆記都是純文本的 .md 文件換個工具隨時帶走Notion 從一開始就不在一個賽道上。以下是幾個維度的直觀對比維度MarkweaveTyporaObsidianNotion開源是否部分插件開源否源文件格式純 Markdown純 Markdown純 Markdown / 庫結構私有塊結構WYSIWYG 模式即時渲染即時渲染閱讀與編輯循環全 WYSIWYG離線優先級高高高低擴展性可編程 API主題插件有限極強數據庫視圖豐富數據遷移成本極低低低高5.2 哪些場景下我更推薦 Markweave如果你符合以下任一條件Markweave 大概率是合適的你在寫技術博客或工作日志最終產物要求發布到 GitHub Pages、VitePress 或其他靜態站點系統需要文檔格式與 Markdown 源結構保持一致你參與的開源項目要求文檔貢獻者用 Markdown 規范格式而你希望在編輯時直接看到效果不需要一遍遍切預覽你受不了某些在線文檔平臺對 Markdown 表格、公式、頁內錨點的閹割想掌控每一個語法細節你希望整個寫作工具鏈里每一條數據都能用grep搜索、能進 Git 比對、能用腳本批量處理。在我的實際使用中Markweave 的跨平臺和輕量是它最強的兩個特質。它的桌面客戶端和網頁端體驗一致數據文件完全由我掌握沒有云同步綁定問題。同時它支持給不同工作區設置不同的配置比如我在寫博客的項目里關閉了拼寫檢查在寫技術方案的項目里打開了行號顯示和自動保存。5.3 在團隊協作場景里的角色定位Markweave 不是協作文檔工具它沒有多人實時編輯能力。這看上去是個短板但換個角度看反而不失為一種優點。團隊技術方案評審時Markweave 負責產出規范的 Markdown 源文檔之后用 GitHub 或 GitLab 的 merge request 流程去做審閱和評論。這樣協作鏈路非常清晰編輯發生在本地評審發生在代碼托管平臺合并后以文檔站形式發布。我在團隊內部推行這套流程已有幾個月體驗最明顯的好處是徹底解決了文檔內容各改各的最后版本對不上的問題。因為每個.md文件都走 Git 版本管理哪一行是誰、什么時候、為什么改的一目了然。雖然 Markweave 本身不做協作但它天然適配 Git 為中心的協作體系這一點其實是很多商業化協作文檔做不到的。最后再分享一下我的個人使用習慣用了一段時間 Markweave 之后我的桌面已經看不到雙欄編輯器了。每天打開它以 Markdown 格式記錄工作日志隨手寫一些代碼草稿周末把一周的要點整理成博客文章。它的確是開源的項目里可以直接看到解析器和編輯器引擎的源碼這對于喜歡折騰編輯器行為的人來說是個寶庫。如果你也在找一個所見即所得、數據還完全在自己手里的 Markdown 寫作工具值得趁周末花一小時裝上試試把它跟手頭的編輯器對比跑一遍說不定就是你在找的那個。