工具頁摘要
瀏覽器端 CommonMark Markdown 即時預覽,支援標題、清單、連結、程式碼區塊與表格;統計六格內容密度判讀矩陣 (字數、段落、標題、連結、程式碼、表格);資料不上傳。
分類：開發工具 / Developer。正式路徑：/tools/developer/markdown-preview。狀態：GOLD。本頁提供可直接閱讀的工具用途、輸入情境、結果解讀、FAQ、信任聲明與相關資源摘要，協助讀者在使用前了解適用情境與限制。
本工具提供一般資訊與估算輔助，計算結果會受輸入值、假設條件與資料更新影響。財務、健康或法律相關結果不應視為專業建議；做出重大決策前，請依實際情況查核來源並諮詢合格專業人士。
中文摘要：Markdown 預覽器 是 Formula Universe 收錄於 開發工具 / Developer 分類的工具頁，包含工具用途、輸入指引、結果解讀、FAQ、資料來源、限制說明與責任參考。
最後更新：2026年6月23日
本頁面由 Formula Universe 編輯團隊審核並維護。我們定期更新工具內容、驗證計算邏輯和資料來源準確性，以確保提供讀者最新、最可靠的資訊。
開發工具 · Markdown · 黃金模板
GFM 語法即時渲染 + 結構統計 + 六段長度分區判讀矩陣
本工具在瀏覽器端把 Markdown (CommonMark + GFM) 轉成 HTML 即時預覽,並統計字數、行數、標題、連結、code fence、圖片數量,並把文件長度放進六段分區判讀矩陣;不上傳任何資料,適合處理 README、issue、部落格草稿與 PR 描述。
範例 → 計算機
先用範例理解 GFM 語法效果,再貼上自己的 README、issue 或部落格草稿。
預覽與結構統計
96
ch
1
H#
1
[](#)
<h1>Hello Markdown</h1> <p>This is <strong>bold</strong> and <em>italic</em>.</p> <ul> <li>item 1</li> <li>item 2</li> </ul> <p><a href="https://example.com" rel="noopener noreferrer" target="_blank">Link</a></p>
結果解讀
L7 固定六段,把目前文件長度放進「適合場景」分區;這是寫作節奏的視覺參考,不是 SEO 或排名建議。
適合 README badge、commit message、Slack 訊息;單行強調與簡短連結為主,過長標題會擠壓版面。
適合 issue 描述、PR 摘要、tooltip 文件;建議 1 級標題 + 2–3 段落 + 1 個列表。
適合部落格、技術筆記;善用 H2/H3 階層、code fence、引用區塊以提升可讀性。
適合 API 文件、user guide;需要 TOC、anchor link、表格、code 範例;考慮拆檔。
適合 ebook、規格書;建議改用 mdBook、Docusaurus、VitePress 等多檔系統管理。
超出單檔 Markdown 合理上限;瀏覽器渲染變慢,git diff 困難,應拆檔或改用 reST/AsciiDoc。
情緒與轉換層
L9 會聯動目前計算結果,顯示字元、行數、標題、連結數,協助判斷文件是否該拆檔、是否需要 TOC、是否該改用文件系統。
結構洞察卡
動力卡
儲存 / 分享
重新貼上 Markdown 時自動重算結構統計與預覽,協助比對不同版本的可讀性與長度。
下一步行動
決策路徑
貼上 Markdown
GFM 渲染
結構統計
選擇輸出
知識
Markdown 由 John Gruber 於 2004 年發明;CommonMark (2014) 是規範化版本;GFM (GitHub Flavored Markdown) 加上表格、刪除線、自動連結、task list、code fence 等擴充;.md 檔在 GitHub、GitLab、VS Code、Obsidian 都是預設格式。
字元數 = string.length;行數 = string.split('\n').length;標題數 = matches /^#{1,6} /m;連結數 = matches /\[.*?\]\(.*?\)/;code fence = matches /^```/m;預覽 = marked.parse(input)。
本工具用簡化解析器,不完整支援 GFM 表格邊界、巢狀列表、HTML inline、math、mermaid;不做 XSS 過濾,正式上線請串接 DOMPurify;大文件 (>100k) 渲染會明顯變慢。
≤200 字元適合 commit / badge;200–1k 適合 issue / PR;1k–5k 適合部落格;5k–20k 該開始用 H2/H3 + TOC;>20k 建議改用多檔文件系統 (mdBook、Docusaurus、VitePress);>100k 應拆檔或改格式。
主要場景:GitHub README、issue、PR、wiki、部落格、技術筆記、Notion 匯出、Obsidian vault、ebook 草稿、API 文件、design doc、postmortem、changelog、ADR。
輸入「# Hello\n\nThis is **bold**.」會渲染為 H1 標題 + 一段含粗體的文字;字元數 31、行數 3、標題 1、連結 0、code fence 0。
常見問題
本工具用簡化解析器,要求表格的分隔線必須是 |---|---|---| 形式且每行 | 數量一致。完整 GFM 表格 (含對齊符號 :---: 與跳脫管線) 建議用 marked.js 或 remark-gfm 處理。
不會。本工具完全在瀏覽器端用 string 操作渲染;頁面關閉後資料即消失,適合處理私有 README、未公開 issue、商業合約草稿與內部 design doc。
本工具用 string.length 計算 UTF-16 code unit;GitHub 與部分編輯器用 UTF-8 byte 或 grapheme cluster。中文、emoji、組合字 (Zalgo) 會差異最明顯;若需 byte 數請改看 outputBytes 區塊。
本工具不支援。Mermaid 需要 mermaid.js 動態執行 <pre class="mermaid">,KaTeX 需要 remark-math + rehype-katex 流程,皆涉及第三方腳本載入,故未內建。專業版會解鎖這兩者。
為了避免 XSS,本工具預設不渲染 inline HTML (<script>、<iframe> 等),只把它們當成文字顯示。CommonMark 允許 inline HTML 但 GFM 會在不安全模式下過濾;若您信任來源,正式環境可在伺服器端串 DOMPurify 後解禁。
經驗法則:單檔 ≤20k 字元最舒服;20k–100k 開始需要 TOC + anchor;>100k 應拆檔或改用 mdBook / Docusaurus。本工具的「六段判讀矩陣」就是依此分區,協助判斷是否該重構文件結構。
推薦工具
* 聯盟連結,購買後我們可能獲得佣金。
解鎖批次 .md 轉 HTML/PDF、front-matter (YAML) 解析、TOC 自動生成、Mermaid / KaTeX 渲染、DOMPurify XSS 過濾、自訂 CSS 主題與列印樣式。
信任聲明 · 相關工具 · 參考資料
本工具僅在瀏覽器端渲染 Markdown,貼上的內容不會送到伺服器;不取代 marked + DOMPurify 正式管線、GitHub 渲染或印刷品排版。
JSON 格式化器 · Regex 測試器 · URL 編碼器 · Color 轉換器
CommonMark Spec 0.31.2 (2024);GFM Spec (GitHub, 2017);John Gruber, Daring Fireball — Markdown (2004);RFC 7763 text/markdown;marked.js 12.x;remark/rehype (unified.js);DOMPurify 3.x。