Modern MD Editor 微信公眾號排版工具,Markdown 貼上不掉樣式

Modern MD Editor 是開源的 Markdown 轉公眾號格式工具,實測剪貼簿成品 43 個行內樣式全程在本機產生,但要留意網頁版重新整理會丟掉草稿,寫長文請改用桌面版。

用 AI 摘要這篇文章:

把一段有標題、粗體、清單、引用和表格的 Markdown 測試稿貼進 Modern MD Editor 的官網,按一下複製鍵,再打開剪貼簿檢查:裡面躺著 15,342 字元的 HTML,帶 43 個行內樣式屬性,一級標題被自動置中、墊上漸層底色,表格欄位連字型、字距都寫死在標籤上。整段轉換在瀏覽器裡跑完,對外請求是 0 個。

Modern MD Editor 是一款 MIT 授權的開源 Markdown 編輯器,核心任務就一個:把 Markdown 稿轉成微信公眾號編輯器吃得下去的富文字。你想拿去貼別的平台也可以,但它所有的樣式調校都是衝著公眾號的貼上行為去的。實際用下來,它給我印象深的地方有兩個:一是把「資料不出門」做得很徹底,二是對你的草稿出乎意料地不上心。這兩件事加起來,直接決定你該用網頁版還是桌面版。

我實際測了什麼,沒碰什麼

這些結論是這樣來的:我用瀏覽器自動化打開官網,貼入一段涵蓋標題、粗體、斜體、行內程式碼、清單、引用、程式碼區塊和表格的測試稿,點開複製選單選公眾號格式,然後直接讀剪貼簿裡的 HTML 內容比對。再把整個專案的原始碼抓下來,逐檔掃過所有會對外連線的呼叫。最後對著 GitHub 的議題清單、發佈資產和 Docker Hub 映像查一輪活躍度。

有兩件事我沒做:沒有真的開一個公眾號後台把成果貼進去看最終呈現,也沒有在本機安裝桌面版來跑。所以涉及「貼進公眾號之後」的行為,我只引用專案議題區的公開紀錄,不當成親眼所見。

剪貼簿裡的成品,比宣傳截圖老實

轉出來的 HTML 可以直接檢查。一級標題拿到的是 font-size: 35px; text-align: center 加一段漸層底色;二級標題用彈性排版對齊裝飾線;粗體標籤帶 font-weight: 900;引用塊有左側粗邊框和半透明漸層底;表格欄位每格都內嵌了框線、留邊、字級與字距;連程式碼區塊的捲軸樣式都寫了進去。這些樣式大多放在每個標籤自己的 style 屬性裡,程式碼區塊則靠一段內嵌的樣式規則處理,同樣不依賴外部 CSS。也就是說,貼到目標平台之後,排版跟著內容走,平台多半剝不掉。

介面本身是左編輯右預覽的雙欄,頂部工具列有視圖切換、複製與下載選單,右側進設定面板調主題、程式碼樣式、字型與排版變數。預設載入的是一份格式測試稿,各種語法都演示過一遍,第一次打開就能對照著玩。

Modern MD Editor 官網編輯器介面,左側 Markdown 編輯區、右側即時預覽與工具列Pin
官網編輯器雙欄介面:左邊寫 Markdown、右邊即時預覽排版

視圖有三種:純編輯器、編輯加預覽雙欄,以及所見即所得的可編輯模式。第三種值得多看一眼,它讓你直接在渲染後的版面上改字、拖選、下語法,底層再用雙向同步把改動寫回 Markdown 原文。習慣 Word 式操作的人會覺得親切,習慣敲原始碼的人留在前一種即可,兩邊看到的是同一份稿。預覽窗還能切桌面、平板、手機三種寬度,寫給手機閱讀的公眾號稿,不用發佈才發現行寬跑掉。

設定面板是這工具花功夫的另一個地方。顏色主題附自訂主題色,改了即時預覽並記住;排版系統用一組 CSS 變數管理間距、圓角、陰影;字族、字級、行高、字距都有獨立調整。這些偏好存進瀏覽器的本機儲存,下次打開沿用,而且頁面載入前會先把主題變數注入,避免切換瞬間的閃白。主題色、字型與排版的可調範圍開得算細。

Modern MD Editor 設定面板,可調顏色主題、字型、字級與排版變數Pin
設定面板:主題色、字族、字級、行高與字距都能調

複製選單只有兩個選項:公眾號格式和純 Markdown。按下之後畫面會跳確認提示,剪貼簿同時放入 HTML 與純文字兩種內容,目標平台用哪種就吃哪種。純文字版的處理是把語法標記剝乾淨,粗體的星號消失、清單變成圓點項目符號,拿去貼純文字環境不會漏出一堆符號。有個小地方值得注意:這次測試的純文字替代內容裡,程式碼區塊的語法高亮樣式以文字形式混了進來,出現整段樣式規則。平常貼富文字不會碰到,但往純文字環境貼、稿件又有程式碼區塊時,要留意這個毛邊。

Modern MD Editor 複製選單展開,顯示公眾號格式與 MD 格式兩個選項Pin
複製選單只有公眾號格式與純 Markdown 兩種選擇

零遙測是真的,不存草稿也是真的

先講隱私這半邊,因為它有程式碼層的鐵證。整個專案的前端與桌面端原始碼裡,掃不到任何 fetch、XMLHttpRequest、WebSocket 或分析工具相關的呼叫,僅有的網址字面值是幾個 GitHub 連結和說明文件連結。實際開著官網操作的整個過程,瀏覽器的連線紀錄裡外部請求是 0,連字型或統計腳本都沒有從第三方載入。你的稿子不出瀏覽器,這句話在這個工具上是成立的。

再講另一半。看原始碼會發現,編輯器內容只活在一個記憶體變數裡,localStorage 存的只有主題設定和介面語言,整個網頁版沒有任何自動存稿機制,也沒有關頁前的救援攔截。我實際驗了一次:在編輯器輸入一段帶記號的文字,按重新整理,畫面回來時內容變回預設的格式測試稿,記號字串消失,而預設狀態下的瀏覽器本機儲存裡連一筆紀錄都沒有。打過的字,就是真的沒了。

這個組合一開始讓我困惑。一個把資料邊界畫得這麼謹慎的工具,怎麼會放過使用者最容易出事的場景?後來想通了它的定位:網頁版是轉換器,拿現成的 Markdown 來轉格式,不是讓你從零寫長文的編輯器。真正替你存稿的是桌面版,有檔案開啟與儲存,快捷鍵跟一般文書軟體一致。要用它寫東西,請直接裝桌面版,或在網頁版旁邊自備一個 .md 檔當底稿。

公眾號為什麼需要行內樣式

背景知識補一段,這決定了這類工具的存在理由。公眾號的圖文編輯器會過濾貼入內容,class 名稱和外部樣式表經常被剝掉,只留下標籤本身和行內屬性。所以從一般 Markdown 編輯器複製過去的稿件,標題不置中、引用沒邊框、程式碼區塊糊成一團字,都得手動重排。這工具的做法是把所有排版決策提前算好,塞進每個標籤的 style 屬性,讓樣式跟著內容本體走。

複製的實作也繞開了瀏覽器的地雷。它優先呼叫現代剪貼簿 API,失敗時退回舊式做法:建一個模擬平台環境的臨時容器,把 HTML 塞進去、選取範圍、再觸發複製,並帶逾時保護,避免稿件太大時複製流程卡死無回應。預設的字型設定用的是微信環境最穩的字族,Mac 上想換成較自然的黑體,設定面板裡有對應選項,2026 年四月的更新還加入了依作業系統自動調整字型的邏輯。

數學公式和圖表這兩塊屬於作者宣稱,這輪未逐一驗證:官方說明指出公式以 MathJax 3 渲成 SVG 換取公眾號相容,流程圖走 Mermaid,PDF 與長圖匯出用純前端方案完成。依賴清單與這些說明對得上。

零安裝網頁版、會存檔桌面版、一行指令 Docker

最輕的是網頁版,打開官網就能用,零安裝,代價是前面說的不存稿。桌面版從 2025 年 10 月開始提供安裝檔,macOS、Windows、Linux 都有,安裝檔從一百多 MB 到 172MB 不等,換得本地檔案的完整操作:選單列有檔案、編輯、檢視、說明四欄,開檔支援 .md、.markdown、.txt,儲存就一組快捷鍵,跟一般文書軟體一致。有意思的是時間線:2025 年九月初有使用者敲碗要打包好的安裝檔,同年十月底就上架了,回應速度不算慢。第三條路是 Docker 自架,映像和原始碼同步在更新,一行指令起在本機 8080 埠,適合想放在自己機器上給團隊用的情境,累積拉取次數接近一萬。

專案現況供你參考:2025 年 7 月開張,截至 2026 年 8 月有 673 顆星、78 個 fork,議題區 26 條,最後一次程式碼推送落在 2026 年 4 月,內容是依作業系統調字型與打包瘦身。以公眾號周邊工具來說,這個社群屬於小而活,不是棄坑狀態,但也談不上有完整的維護團隊。

這類內容進出都在本機的工具,我們先前也介紹過幾個。同樣把 Markdown 轉成可分享格式且全程本地處理的,有把 Markdown 做成分享圖的開源工具;若你經營公眾號想處理後台資料,微信公眾號文章導出器能把發表記錄與閱讀數匯出成 CSV;微信生態的其他內容工具,例如把 Channels 影片存進硬碟的下載器,也收錄過。

一個人的專案,還開著的議題

議題區有一條值得看:2026 年 5 月有人回報,貼進公眾號編輯器後,標題的裝飾條會丟失,這條議題截至 2026 年 8 月仍開著。也就是說,核心場景存在已知的邊角問題,轉換成功之後仍要目檢一次再發佈。歷史上連續引用塊的格式錯誤被修掉過,維護者有在處理回報,但單一維護者的巴士因子是事實:兩百出頭個提交裡,將近九成九來自同一人。

版本紀律也鬆散。發佈標籤已經到 v1.1.4,專案描述檔裡的版本號卻停在 1.0.0,兩批安裝檔的檔名全都掛著 1.0.0。安裝後看到舊版號別緊張,先看功能在不在。另外,介面語言只有簡體中文和英文,沒有繁中選項;對台灣使用者來說讀得懂,但工具列字樣是簡體。安裝檔體積偏大,是 Electron 應用的通病,在意硬碟空間的話網頁版或 Docker 版更省。

測試體系倒是意外地扎實,tests 目錄下有 46 個測試檔,覆蓋解析、複製、匯出等核心模組,對這種規模的個人專案來說少見。

貼過去不必重排,才算用對

如果你的工作流程是用 Markdown 寫稿、貼進公眾號或類似會剝樣式的編輯器,這工具省下的是每次貼完重排的手工時間,值得裝。建議的動線是:稿子在平常慣用的編輯器裡寫好、存檔,開網頁版整篇貼入,選主題和字型,按複製,貼到公眾號後台,最後目檢一遍標題和程式碼區塊。寫長文或多稿並行,直接上桌面版,養成按儲存的習慣;偶爾轉一段內容,網頁版夠用。判斷有沒有用對很簡單:貼過去之後標題、清單、引用的排版直接可用,不必再動手修,就是成功;如果標題裝飾或程式碼區塊跑了樣,回頭對照議題區那則回報的情境,手動補上就好。

反過來說,需要繁中介面、雲端同步或多人協作,這工具都沒有,也看不出打算做。它解決的是很窄的一件事,而解決得乾淨:轉換全程在本機發生,成品和原始碼都攤得開讓你看。對一個免費開源的專案來說,這樣的邊界畫法我給正面評價。

Sliven 褚崇名
Sliven 褚崇名

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

文章: 934

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


Share to...