原來公眾號排版這麼簡單：墨韻簡排上手指南
整理版優先睇
墨韻簡排：用Markdown寫作，一鍵複製公眾號HTML，告別手動排版
寫公眾號嘅朋友成日遇到一個煩惱：Markdown寫好咗正文，一粘貼入微信編輯器，所有格式都要重新執過。呢個工具嘅作者DuebassLei就係想解決呢個問題——佢整咗個叫「墨韻簡排」嘅開源工具，畀你喺瀏覽器寫Markdown，右邊手機預覽，一鍵複製HTML，直接粘貼去公眾號編輯器，中間唔使再受排版折磨。
呢個工具係本地優先，文稿存喺瀏覽器，支援導入導出.md，唔使登錄，唔使將內容上傳去第三方服務器。佢提供53種組件，包括封面、步驟、時間線、對比、FAQ等，仲有39套主題可以實時切換。整體工作流好簡單：打開編輯器 → 寫Markdown → 插入組件 → 揀主題 → 複製HTML → 粘貼發佈，熟練嘅話五分鐘就出到稿。
文章強調排版唔係裝飾，係幫讀者慳時間。讀者會先掃結構，再讀細節，所以清晰嘅步驟條、對比塊、FAQ比堆砌裝飾有用。作者建議先寫結構後加組件，建立個人模板，發佈前一定要喺微信草稿箱試一次以真機效果作準。整體嚟講，墨韻簡排將Markdown寫作同公眾號排版嘅距離縮到最短，係一個好實用嘅開源工具。
- 墨韻簡排解決由Markdown過渡到公眾號排版嘅反覆調整問題，提供一鍵複製HTML功能。
- 工具提供53種結構化組件（hero、steps、compare、faq等）同39套主題，樣式統一，組合自由。
- 同傳統微信編輯器比較，優勢在於本地文稿管理、實時預覽、主題切換，唔使每次重調格式。
- 建議「先寫結構，後加組件」，並建立個人模板（例：hero + steps + faq + cta），提升效率。
- 發佈前一定要喺微信草稿箱粘貼一次，以真機效果作準，避免樣式差異。
墨韻簡排 GitHub 倉庫
開源 Markdown 微信排版工具，支援本地跑 npm run dev 或直接線上體驗
呢個工具適合邊個？同舊方法有咩分別？
如果你寫技術博客、做產品更新、偶爾髮長文，需要「結構清晰、樣式統一、出稿要快」，咁呢個工具就啱你用。墨韻簡排唔會幫你揀題目或者寫正文，佢專注排版呢一環——將你寫好嘅內容變成公眾號編輯器直接食到嘅HTML。
佢專注排版呢一環——將你寫好嘅內容變成公眾號編輯器直接食到嘅HTML。
誤區：公眾號排版必須花哨 → 事實：讀者先掃結構，再讀細節。
誤區：Markdown 工具只能出「程序員審美」 → 事實：墨韻簡排面向公眾號場景設計。
- 微信編輯器手動排版：每次粘貼都要重調格式；墨韻簡排：主題一次揀好，全文統一。
- 複雜結構要靠截圖或長圖；墨韻簡排：steps、timeline、compare直接寫語法。
- 樣式難複用；墨韻簡排：39套主題+53種模塊，換稿唔使從零開始。
- 本地草稿唔好管；墨韻簡排：側欄文檔列表，支援導入導出.md。
五分鐘上手流程同編輯器界面
最快嘅上手方法：打開編輯器，新建或導入.md，寫正文，用「插入組件」加:::hero、:::steps等，頂欄切換主題，右邊手機框對照，最後點「複製公眾號HTML」，去mp.weixin.qq.com粘貼就得。
文稿存在本地，唔使登錄，唔使將內容上傳到別人嘅服務器。
- 1 打開訪問編輯器，新建或導入 .md
- 2 寫作：寫正文，用「插入組件」加 :::hero、:::steps 等
- 3 預覽：頂欄切換排版主題，右側手機框對照
- 4 複製：點「複製公眾號 HTML」
- 5 發佈：登錄 mp.weixin.qq.com，正文編輯器粘貼
編輯器界面分三塊：左側文檔欄（多篇草稿、導入導出.md）、中間編輯區（CodeMirror 6 寫Markdown，支援GFM）、右側預覽（手機框實時渲染，切換主題）。頂欄有配色、語法手冊、複製按鈕。長時間寫稿可以開護眼模式。
長時間寫稿嘅話，將界面調成護眼模式會舒服好多。
唔確定語法時，打開「語法手冊」或「插入組件」面板，同引擎係同步嘅。
組件點樣寫？核心語法同常見例子
墨韻簡排嘅核心語法得兩類：普通Markdown同:::名稱圍欄。閉合行必須係獨立嘅:::。文首封面可以用:::hero或者YAML frontmatter自動生成。
---
badge: GUIDE
title: 文章主標題
subtitle: 一句話說明
chips: 標籤1|標籤2
---
正文從這裏開始……其他常用組件包括：:::cards（多卡片概覽）、:::steps（步驟流程）、:::timeline（事件脈絡）、:::compare（方案對比）、:::faq（常見問題）、:::checklist（清單）等。
排版唔係裝飾。係讓讀者少花 10 秒鐘搞懂你在說什麼。
行內支援 ==漸變重點==、!!膠囊標籤!!、^^主題色強調^^，喺段落入面直接寫。
- steps：適合教程類文章，每步有標題同描述，可標記當前步驟。
- timeline：適合呈現事件順序，例如Day 1、Day 2、Day 3。
- compare：左邊舊方案、右邊新方案，一行一條對比。
- faq：常見問題問答格式，可摺疊。
實用習慣同全篇總結
作者分享咗幾個實用習慣，幫你由「能寫」變到「寫得快」。
打開 → 寫 → 預覽 → 複製 → 粘貼，五步出稿。
- 1 組件唔係越多越好：一篇2000字文章，hero + 2個章節組件 + faq + cta通常夠用。
- 2 建立自己嘅模板：固定用 hero + steps + faq + cta 嘅稿子，存成 .md 導入複用。
- 3 主題唔好喺寫作中途換：定稿前統一試2~3個，避免預覽習慣同最終樣式不一致。
- 4 複雜表格用 comparison-table：比普通Markdown表格喺手機上更好掃。
- 5 發前喺微信草稿箱粘貼一次：個別主題嘅下劃線、間距，以真機為準。
你讀到嘅排版，就係編輯器能做出來嘅。
閲讀路線
閲讀路線
7 個章節
呢個工具啱邊個用
同傳統方式比，分別喺邊
五分鐘上手流程
編輯器裏面有啲乜
組件點樣寫
組件全景（按分類）
幾個實用習慣
如果你寫過公眾號，大概都經歷過呢件事：正文喺 Markdown 已經寫好，貼入微信編輯器之後，標題間距、引用樣式、列表縮排全部要重做。墨韻簡排想解決嘅就係呢個——**喺瀏覽器寫完，右邊手機框睇一眼，複製 HTML，貼上發佈**。文稿喺本地，唔使登入，唔使將內容上載去人哋嘅伺服器。
本地優先
文稿喺瀏覽器
支援匯入匯出 .md，草稿自己管理
53 種組件
::: 圍欄語法
封面、步驟、對比、FAQ 等一鍵插入
39 套主題
即時切換預覽
模組同主題分開配，組合自由
你可能會用到佢，如果……
寫技術 Blog 嘅人、做產品更新嘅團隊、偶爾出長文嘅自媒體，需求都差唔多：「結構清晰、樣式統一、出稿要快」。
墨韻簡排唔幫你做選題，亦唔幫你寫正文。佢負責嘅係排版呢一環——將已經寫好嘅內容，變成公眾號編輯器可以直接食嘅 HTML。
微信編輯器手動排版 ✘ 每次貼都要重新較格式 | 墨韻簡排 主題一次揀好，全文統一 |
✘ 複雜結構靠截圖或長圖 | steps、timeline、compare 直接寫語法 |
✘ 樣式好難重用 | 39 套主題 + 53 種模組，轉稿唔使由頭開始 |
✘ 本地草稿好難管理 | 側欄文件列表，支援匯入匯出 .md |
誤區
誤區：公眾號排版一定要花巧
事實
事實：讀者會先掃結構，再睇細節。清晰嘅步驟條、對比塊、FAQ，比堆裝飾有用
誤區
誤區：Markdown 工具只能出「程序員審美」
事實
事實：墨韻簡排面向公眾號場景，模組同主題都係按手機閲讀設計嘅
工作流程
label="工作流程" title="由 Markdown 到發佈" active="3"
1 打開 去編輯器，新建或匯入 .md | 2 寫作 寫正文，用「插入組件」加 :::hero、:::steps 等 | 3 預覽 頂欄切換排版主題，右邊手機框對照 | 4 複製 撳「複製公眾號 HTML」 | 5 發佈 登入 mp.weixin.qq.com，正文編輯器貼上 |
文首都可以用 YAML frontmatter，保存嗰陣會自動轉成 :::hero。唔肯定語法時，打開「語法手冊」或「插入組件」面板，同引擎係同步嘅。
下面呢段就係 frontmatter 寫法，你可以直接複製試：
---
badge: GUIDE
title: 文章主標題
subtitle: 一句話說明
chips: 標籤1|標籤2
---
正文從這裏開始……
界麵分三塊，熟習咗之後好快：
「左邊文件欄」 — 多篇草稿、重新命名、匯入匯出 .md「中間編輯區」 — CodeMirror 6 寫嘅 Markdown，支援 GFM 常用語法 「右邊預覽」 — 手機框即時渲染，切換主題即刻睇效果
頂欄仲有 「配色」（9 套強調色 + 淺/深/跟隨系統）、「語法手冊」、「複製公眾號 HTML」。長時間寫稿嘅話，將介面校成護眼模式會舒服好多。
墨韻簡排嘅核心語法得兩類：「普通 Markdown」 + 「:::名稱 圍欄」。結束行一定要係獨立嘅 :::。
下面按場景介紹幾個最常用嘅。
開篇：封面與重點
文首封面用 :::hero，或以上面嘅 YAML 自動生成：
多卡片概覽用 :::cards：
寫作
Markdown 原生
標題、列表、表格、程式碼塊都支援
組件
::: 圍欄
53 種，按分類瀏覽插入
主題
39 套
同模組獨立，隨時切換
結構：步驟、時間線、對比
教學類文章，:::steps 好慳功夫：
示範
label="示範" title="範例：三步發佈" active="2"
1 撰寫 輸入 Markdown | 2 預覽 切換主題 | 3 發佈 複製 HTML 貼上公眾號 |
事件脈絡用 :::timeline：
方案對比用 :::compare，一行一條，左邊舊方案右邊新方案：
純手寫 HTML ✘ 樣式內聯自己寫 | 墨韻簡排 juice 自動處理 |
✘ 改結構要鬱 DOM | 改 Markdown 就得 |
✔ 靈活到誇張 | ✔ 對公眾號作者啱啱好 |
可讀性：提示、金句、術語
行內仲支援 ==漸變重點==、!!膠囊標籤!!、^^主題色強調^^，喺段落直接寫。
排版唔係裝飾。係等讀者慳返 10 秒鐘，搞清楚你講乜。
術語
::: 圍欄
數據與案例
模塊數
53
覆蓋開篇到收尾
主題數
39
包括預設、山吹、全棧藍、凝夜紫等
出稿時間
~5 分鐘
熟練之後由寫完到複製 HTML
收尾：FAQ、清單、行動呼籲
常見問題
要安裝軟件嗎？
唔使。瀏覽器打開就用得，純前端。
模組同主題係咩關係？
獨立。同一篇稿轉主題，模組結構唔變。
複製出嚟嘅 HTML 微信認唔認？
經 juice 內聯樣式，專為公眾平台貼上優化。複雜 CSS 仍然以微信編輯器為準。
文稿存在邊度？
本地瀏覽器。可以匯出 .md 備份，換機要自己同步。
出之前過一次清單：
- ✓
正文結構完整，hero 或一級標題已經就位 - ✓
至少用一個組件（steps / compare / faq）加強掃讀 - ✓
預覽裏面切換 2 個主題確認樣式可接受 - ✓
複製 HTML 之後喺微信草稿箱貼上試排
試嚇
打開編輯器試寫一篇
GitHub 在線體驗倉庫地址：github.com/DuebassLei/md-wechat-editor。本地執行 npm run dev 也行。
「插入組件」面板入面嘅 53 種模組，按用途大致分八類。寫稿時唔使全部用，「揀 3～5 個貼近場景嘅就得」。
過渡
由「識寫」到「寫得快」
組件唔係愈多愈好。一篇 2000 字嘅文章，hero + 2 個章節組件 + faq + cta，通常夠用。
「先寫結構，後加組件。」 正文順暢咗先插 steps、compare，唔係改結構時要改兩邊。 「建立自己嘅範本。」 固定用 hero + steps + faq + cta 嘅稿，儲存成 .md匯入重用。「主題唔好喺寫作中途轉。」 定稿前統一試 2～3 個，避免預覽習慣同最終樣式唔夾。 「複雜表格用 comparison-table。」 比普通 Markdown 表格喺手機上更容易掃。 「出稿前喺微信草稿箱貼一次。」 個別主題嘅底線、間距，以真實手機為準。
一句講曬
墨韻簡排 = Markdown 寫作 + 公眾號排版，中間唔隔一個折磨人嘅編輯器
53 種 ::: 組件覆蓋由封面到 FAQ 嘅常見結構；39 套主題即時預覽；一鍵複製 juice 內聯 HTML；文稿本地儲存。打開 → 寫 → 預覽 → 複製 → 貼上，五步出稿。
關注公眾號，獲取排版更新
墨韻簡排
開源 Markdown 微信排版工具 · 寫好 Markdown，簡排入公眾號
https://github.com/DuebassLei/md-wechat-editor
你點睇？平時寫公眾號最煩邊一步——係較格式，定係揾配圖，定係反覆貼上？留言講下，我之後跟高頻痛點補組件同範本。
讚好同「在看」，係對開源工具最好嘅支持。
READING PATH
閲讀路線
7 個章節
這工具適合誰
和傳統方式比，差在哪
五分鐘上手流程
編輯器裏有什麼
組件怎麼寫
組件全景（按分類）
幾個實用習慣
如果你寫過公眾號，大概都經歷過這件事：正文在 Markdown 裏已經寫好了，粘貼進微信編輯器之後，標題間距、引用樣式、列表縮進全得重來一遍。墨韻簡排想解決的就是這個——**在瀏覽器裏寫完，右側手機框裏看一眼，複製 HTML，粘貼發佈**。文稿存在本地，不用登錄，不用把內容上傳到別人的服務器。
本地優先
文稿在瀏覽器
支持導入導出 .md，草稿自己管
53 種組件
::: 圍欄語法
封面、步驟、對比、FAQ 等一鍵插入
39 套主題
實時切換預覽
模塊和主題分開配，組合自由
你可能會用到它，如果……
寫技術博客的人、做產品更新的團隊、偶爾髮長文的自媒體，需求都差不多：「結構清晰、樣式統一、出稿要快」。
墨韻簡排不替你做選題，也不替你寫正文。它管的是排版這一環——把已經寫好的內容，變成公眾號編輯器能直接吃的 HTML。
微信編輯器手工排版 ✘ 每次粘貼都要重調格式 | 墨韻簡排 主題一次選好，全文統一 |
✘ 複雜結構靠截圖或長圖 | steps、timeline、compare 直接寫語法 |
✘ 樣式難複用 | 39 套主題 + 53 種模塊，換稿不用從零開始 |
✘ 本地草稿不好管 | 側欄文檔列表，支持導入導出 .md |
誤區
誤區：公眾號排版必須花哨
事實
事實：讀者先掃結構，再讀細節。清晰的步驟條、對比塊、FAQ，比堆裝飾有用
誤區
誤區：Markdown 工具只能出「程序員審美」
事實
事實：墨韻簡排面向公眾號場景，模塊和主題都是按移動端閲讀設計的
WORKFLOW
label="WORKFLOW" title="從 Markdown 到發佈" active="3"
1 打開 訪問編輯器，新建或導入 .md | 2 寫作 寫正文，用「插入組件」加 :::hero、:::steps 等 | 3 預覽 頂欄切換排版主題，右側手機框對照 | 4 複製 點「複製公眾號 HTML」 | 5 發佈 登錄 mp.weixin.qq.com，正文編輯器粘貼 |
文首也可以用 YAML frontmatter，保存時會自動轉成 :::hero。不確定語法時，打開「語法手冊」或「插入組件」面板，和引擎是同步的。
下面這段就是 frontmatter 寫法，你可以直接複製試：
---
badge: GUIDE
title: 文章主標題
subtitle: 一句話說明
chips: 標籤1|標籤2
---
正文從這裏開始……
界面分三塊，習慣之後很快：
「左側文檔欄」 — 多篇草稿、重命名、導入導出 .md「中間編輯區」 — CodeMirror 6 寫的 Markdown，支持 GFM 常用語法 「右側預覽」 — 手機框實時渲染，切換主題立刻看效果
頂欄還有 「配色」（9 套強調色 + 淺/深/跟隨系統）、「語法手冊」、「複製公眾號 HTML」。長時間寫稿的話，把界面調成護眼模式會舒服很多。
墨韻簡排的核心語法就兩類：「普通 Markdown」 + 「:::名稱 圍欄」。閉合行必須是單獨的 :::。
下面按場景舉幾個最常用的。
開篇：封面與要點
文首封面用 :::hero，或者用上面的 YAML 自動生成：
多卡片概覽用 :::cards：
寫作
Markdown 原生
標題、列表、表格、代碼塊都支持
組件
::: 圍欄
53 種，按分類瀏覽插入
主題
39 套
和模塊獨立，隨時切換
結構：步驟、時間線、對比
教程類文章，:::steps 很省事：
DEMO
label="DEMO" title="示例：三步發佈" active="2"
1 撰寫 輸入 Markdown | 2 預覽 切換主題 | 3 發佈 複製 HTML 粘貼公眾號 |
事件脈絡用 :::timeline：
方案對比用 :::compare，一行一條，左邊舊方案右邊新方案：
純手寫 HTML ✘ 樣式內聯自己寫 | 墨韻簡排 juice 自動處理 |
✘ 改結構要動 DOM | 改 Markdown 就行 |
✔ 靈活到變態 | ✔ 對公眾號作者剛好夠用 |
可讀性：提示、金句、術語
行內還支持 ==漸變重點==、!!膠囊標籤!!、^^主題色強調^^，在段落裏直接寫。
排版不是裝飾。是讓讀者少花 10 秒鐘搞懂你在說什麼。
術語
::: 圍欄
數據與案例
模塊數
53
覆蓋開篇到收尾
主題數
39
含默認、山吹、全棧藍、凝夜紫等
出稿時間
~5 分鐘
熟練後從寫完到複製 HTML
收尾：FAQ、清單、行動號召
常見問題
要安裝軟件嗎？
不用。瀏覽器打開就能用，純前端。
模塊和主題是什麼關係？
獨立。同一篇稿子換主題，模塊結構不變。
複製出來的 HTML 微信認嗎？
經 juice 內聯樣式，專為公眾平台粘貼優化。複雜 CSS 仍以微信編輯器為準。
文稿存在哪？
本地瀏覽器。可導出 .md 備份，換設備需自己同步。
發之前過一遍清單：
- ✓
正文結構完整，hero 或一級標題已就位 - ✓
至少用一個組件（steps / compare / faq）增強掃讀 - ✓
預覽裏切換 2 個主題確認樣式可接受 - ✓
複製 HTML 後在微信草稿箱粘貼試排
TRY IT
打開編輯器試寫一篇
GitHub 在線體驗倉庫地址：github.com/DuebassLei/md-wechat-editor。本地跑 npm run dev 也行。
「插入組件」面板裏的 53 種模塊，按用途大致分八類。寫稿時不用全用，「挑 3～5 個貼場景的就行」。
過渡
從「能寫」到「寫得快」
組件不是越多越好。一篇 2000 字的文章，hero + 2 個章節組件 + faq + cta，通常夠了。
「先寫結構，後加組件。」 正文通順了再插 steps、compare，不然改結構時要動兩處。 「建自己的模板。」 固定用 hero + steps + faq + cta 的稿子，存成 .md導入複用。「主題別在寫作中途換。」 定稿前統一試 2～3 個，避免預覽習慣和最終樣式不一致。 「複雜表格用 comparison-table。」 比普通 Markdown 表格在手機上更好掃。 「發前在微信草稿箱粘一次。」 個別主題的下劃線、間距，以真機為準。
一句話總結
墨韻簡排 = Markdown 寫作 + 公眾號排版，中間不隔一個折磨人的編輯器
53 種 ::: 組件覆蓋從封面到 FAQ 的常見結構；39 套主題實時預覽；一鍵複製 juice 內聯 HTML；文稿本地存儲。打開 → 寫 → 預覽 → 複製 → 粘貼，五步出稿。
關注公眾號，獲取排版更新
墨韻簡排
開源 Markdown 微信排版工具 · 寫好 Markdown，簡排進公眾號
https://github.com/DuebassLei/md-wechat-editor
你怎麼看？平時寫公眾號最煩哪一步——是調格式，還是找配圖，還是反覆粘貼？留言說說，我後面按高頻痛點補組件和模板。
點贊和「在看」，是對開源工具最好的支持。