跳到主要內容
楓葉工具箱 ToolMaple

Markdown 預覽

即時 Markdown 編輯與預覽，支援 GFM（表格、刪除線、checkbox、code block）。README、部落格、技術文件邊寫邊看渲染結果，內容不離開瀏覽器。

你好，Markdown

這是 粗體、斜體、刪除線、inline code。

列表

  • 項目一
  • 項目二
    • 巢狀
  • 項目三

編號

  1. 第一
  2. 第二
  3. 第三

Code Block

function hello(name: string) {
  console.log(`Hello, ${name}!`)
}

def greet(name: str) -> None:
    print(f"Hello, {name}!")

表格

工具用途
BMI健康
QR Code生活

引用

這是引用區塊 多行也可以

連結與圖片

楓葉工具箱

Checkbox

  • 已完成
  • 待辦

什麼是 Markdown？

Markdown 是 2004 年 John Gruber 與 Aaron Swartz 設計的「輕量標記語言」，用最少符號標示常見格式（**粗體**、`code`、`# 標題`），原始檔仍是純文字、易讀、好寫、不像 HTML 滿是<tag>。設計初衷是「寫給人看，順便能轉 HTML」，不是「用來取代 HTML」。

2014 年 CommonMark 規範把語法形式化，解決早期各家實作互相不相容的問題。GitHub 進一步擴充成 GFM（GitHub Flavored Markdown），加上表格、刪除線、任務 checkbox、autolink、deletion 等實用語法，是今日網路上最普及的方言。

支援的語法

  • 標題 1-6 級（# ## ### …）
  • 粗體、*斜體*、~~刪除線~~、`inline code`
  • 無序與有序列表、巢狀
  • 表格（GFM）含對齊
  • 程式碼區塊（含語法高亮、自動偵測語言）
  • 引用（>）
  • 連結 [text](url)、圖片 ![alt](src)
  • 水平線（---）
  • Checkbox（- [x] / - [ ]）
  • 自動辨識 URL（GFM autolink）

Markdown 方言比較

  • CommonMark：最嚴謹的標準規範。Stack Overflow、Discord、Reddit 採用
  • GFM：CommonMark + 表格 + 任務 list + 刪除線 + autolink。GitHub、本工具、絕大多數現代平台採用
  • MDX：Markdown + JSX，可在文件中嵌入 React 元件。Next.js、Docusaurus 文件常用
  • Obsidian / Notion：在 GFM 上各自再擴充（雙向連結、callout block、嵌入區塊），不一定能跨平台

常見坑

  • 單一換行不換行：CommonMark 規定「單一換行只算空白」，需兩個空格 + 換行 或連續兩個換行（空行） 才會真的換行。本工具與 GitHub 都遵守此規範，若預覽結果跟你預期不同，檢查是否漏空行
  • 下底線變斜體：some_var_name 在某些方言會把中間的 _ 當斜體標記，破壞顯示。用反引號包成 inline code 解決
  • 表格欄位有 |：表格內容含| 會破壞欄位，要 escape 成 \|
  • HTML 直接嵌：Markdown 規範允許嵌入 HTML 標籤，但各家行為不一。本工具基於 react-markdown 預設，不渲染 raw HTML，會把 <div>當純文字顯示，是更嚴格也更安全的做法。GitHub 渲染時會 sanitize 後保留部分 HTML（差異留意）

常見問題

為什麼我複製到 Word 格式跑掉？

Markdown 轉成的 HTML 在貼到 Word / Google Docs 時，樣式會被各家辦公軟體重新解讀。建議：複製預覽區的「顯示結果」（不是原始 Markdown），或直接匯出 PDF / 印成 PDF 後 OCR 貼進去。

能用數學公式 LaTeX 嗎？

標準 Markdown 與 GFM 都沒有數學公式。GitHub 自己用 MathJax 支援 $...$，Obsidian / Notion 也類似。本工具預設不渲染 LaTeX，需要的話可在 preview 環境另外加 MathJax。

可以畫流程圖嗎？

GitHub 與部分 Markdown 平台支援Mermaid 流程圖（用 ```mermaid code block 包語法）。本工具暫不渲染 Mermaid，但 source 可以保留，貼到 GitHub Issue / 文件後即可看到。

隱私說明

本工具用 react-markdown + remark-gfm + rehype-highlight 在你的瀏覽器內解析渲染，code block 自動偵測語言並上色，內容絕不傳到任何伺服器。可放心寫敏感的內部文件或還未發表的文章。

相關工具