Markdown 預覽

什麼是 Markdown？

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

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

也因為是這樣長出來的，同一份 .md 在不同地方不會長得一樣。在編輯器裡看起來對的表格，貼上去才發現少了一行； 記得有用的語法，換一個平台就變成一行明碼。與其靠記憶，不如貼進左欄看一次右欄， 右欄跑的就是 GFM 這一套規則。

Markdown 方言比較

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

要寫去哪裡，就用哪一套的最小交集：目的地是 GitHub 或大多數部落格系統， 這頁看到的就是你會拿到的；目的地是 Obsidian 或 Notion 自己的語法， 那部分本頁不會渲染，得回到該平台試。

支援的語法

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

預設載入的範例就把上面這些各示範了一次，想看某個語法怎麼寫， 直接在左欄找到那一段改改看，比從頭打一份快。

寫一份 README，貼回專案之前先看過

1. 把左欄的範例全選刪掉，貼進你的草稿，或直接從零開始打。右欄是即時的，不必按任何按鈕。
2. 先看層級：一份文件只留一個一級標題，其餘用二級、三級往下分。右欄的標題有底線， 一眼就能看出哪裡跳級了。
3. 確認換行。想要的斷行沒出現，就是少了空行，這是 Markdown 最常見的落差，下面「常見坑」第一條講的就是它。
4. 檢查程式碼區塊有沒有標語言。標了才會上色，也才會在 GitHub 上顯示正確的高亮。
5. 確認無誤後，回左欄全選複製你的 Markdown 原始碼，貼回 README.md。要的是左欄那份，不是右欄的 HTML。

排一張表格、列一份待辦清單

1. 表格至少要三行：標題列、分隔列（|---|---|）、內容列。少了分隔列，整張表就會變成一行普通文字。
2. 要靠左、置中、靠右，在分隔列的橫線兩端加冒號：:---、:---:、---:。
3. 欄位裡要放直線符號時記得跳脫，寫成 \|，否則那一格會被切成兩格。
4. 待辦清單用 - [ ] 項目 與 - [x] 項目，中括號中間的空白不能省。右欄會渲染成真的方框。
5. 表格在右欄跑掉，通常是某一列的直線數量跟標題列不一致，逐列數一次就會找到。

原始碼與 HTML，哪一份該帶走

• 要貼回 GitHub、部落格後台或任何吃 Markdown 的地方：帶走左欄的原始碼，全選複製就好。右欄那份 HTML 在這些地方反而會被當成一堆標籤。
• 要貼進 HTML 範本、CMS 的原始碼模式、郵件範本：按 右上角的「複製 HTML」。它複製的是預覽區當下渲染出來的 HTML 原始碼，以純文字進剪貼簿。
• 那串 HTML 不帶本站的樣式：本站的樣式 class 與程式碼上色的標籤都拿掉了，只留標籤結構，程式碼區塊保留 language-xxx 的 class。貼到別的網站會套用那邊的樣式。
• 要保留排版貼進 Word 或 Google Docs：直接在右欄反白預覽內容複製，貼過去比較接近你看到的樣子。
• 要存檔：本頁不提供下載，請把左欄內容貼進你的編輯器 另存成 .md。關掉分頁內容就沒了。

同一份 Markdown，貼到各平台的差別

• GitHub、GitLab：最接近本頁的結果。表格、checkbox、 autolink 都在；差別在它們額外支援 Mermaid 與數學式，而本頁不渲染那兩者。
• Slack：用的不是標準 Markdown。粗體是單個星號 包起來、斜體是底線、刪除線是波浪號，貼一份標準 Markdown 過去只會看到一堆符號。
• LINE 與多數即時通訊：多半只認粗體、斜體這類少數行內效果，有的完全不解析；標題、表格、清單都不會渲染。要傳排版好的東西，請傳連結、圖片或 PDF。
• Notion、Obsidian：貼上 Markdown 多半會被轉成它們自己的區塊，反過來從它們複製出來的內容也可能帶著只有自家看得懂的語法， 跨平台前先在這裡貼一次，看看還剩下什麼。
• 靜態網站與文件系統：各自用不同的 Markdown 套件，額外功能（目錄、警示框、註腳）通常靠外掛，換一套就要重測， 以你的專案實際使用的設定為準。

常見坑與隱私

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

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

• 預覽區裡的圖片是真的向來源網站抓圖，所以貼上含外部圖片的 Markdown 時，那些網站會知道你看過。想完全不外連，先把圖片語法拿掉再貼。
• 右欄是本站的樣式，不是目的地平台的樣式。行距、字級、表格邊框都會變， 用它確認結構正確就好，不要用它預期最終外觀。