線上預覽 Markdown 解決的不是「看文字」而是「看結果」
Markdown 原始碼任何文字編輯器都能開啟,但原始碼正確不代表渲染一定符合預期。表格少一個分隔符、程式碼圍欄沒有閉合、標題層級跳躍、Mermaid 語法錯誤,都可能在最終頁面才暴露。
Markdown 線上閱讀器把原始碼編輯、即時預覽和目錄放在同一頁面,適合在提交文件前快速檢查。它不取代 GitHub、文件網站或靜態網站產生器的最終建置,而是提供更快的第一輪回饋。
先確認您需要哪一種相容性
標準 Markdown
標題、段落、強調、引用、清單、連結、圖片和圍欄程式碼區塊構成最常見的基礎。不同解析器對空行、縮排和巢狀清單的容錯可能不同,因此建議使用明確、簡單的寫法,不依賴偶然可用的格式。
GitHub Flavored Markdown(GFM)
README 和開發文件常用 GFM 擴充,包括:
- 表格、工作清單與刪除線;
- 自動辨識 URL;
- 圍欄程式碼區塊和語言標記;
- 與 GitHub 風格接近的換行和清單處理。
預覽器支援 GFM 不等於完全複製 GitHub。儲存庫相對連結、issue 引用、使用者提及、徽章圖片和允許的 HTML 標籤仍依賴平台情境。
預覽 GFM 表格與工作清單
表格至少需要表頭和分隔列:
| 狀態 | 工作項目 |
| --- | --- |
| 完成 | 檢查標題層級 |
| 待辦 | 驗證行動版表格 |
- [x] 檢查連結
- [ ] 檢查圖片替代文字
預覽時觀察三件事:欄位是否正確對齊、長內容在窄螢幕是否需要水平捲動、工作項目是否被錯誤放入普通清單。複雜表格通常不適合行動裝置,可考慮拆成小表格或清單。
程式碼區塊、高亮與複製
圍欄開頭的語言標記決定高亮方式,例如 typescript、python 或 json。標記寫錯通常不會破壞內容,但會退回純文字顯示。不要只靠顏色傳達含義;程式碼本身應保持可讀。
線上預覽適合檢查圍欄是否閉合、縮排是否被誤解析,以及長程式碼行是否溢出。真正的程式碼正確性仍需編譯器、測試或對應執行環境驗證。
Mermaid 圖表如何預覽
把圖表放在語言為 mermaid 的程式碼圍欄中:
```mermaid
flowchart LR
Draft --> Preview
Preview --> Review
Review --> Publish
```
Mermaid 不是 Markdown 標準的一部分。若目標平台不支援,可以保留原始碼並匯出圖片作為相容方案。預覽器採用嚴格安全模式渲染,但仍建議不要從未知來源複製包含可疑連結或複雜指令的圖表。
KaTeX 數學公式與擴充語法
行內公式通常寫作 $E = mc^2$,區塊公式使用成對的 $$。KaTeX 支援大量常用 LaTeX 指令,但不是完整 TeX 引擎;過度依賴套件的公式可能無法渲染。
註腳、GitHub Alerts 和 emoji 也屬於擴充能力。發布前要以目標系統為準:在一個預覽器中顯示成功,只能說明該預覽器支援,不能證明所有平台都支援。
本機檔案、raw URL 和分享連結的隱私差異
三種輸入方式的網路界線不同:
- 選擇本機檔案或貼上文字:本站工具在目前瀏覽器中讀取和渲染內容。
- 載入 raw URL:瀏覽器必須請求您提供的遠端位址,目標主機會看到正常網路請求。
- 建立分享連結:正文編碼在
#後的 URL fragment 中,fragment 不會作為 HTTP 請求的一部分傳送到本站伺服器,但完整連結仍可能被瀏覽器歷史、剪貼簿、通訊軟體或收到連結的人保存。
因此,含金鑰、存取權杖、客戶資料或未公開原始碼的文件不應透過分享連結傳播。使用第三方線上工具時也應單獨核對其實作和隱私政策,不能把本站行為推論到其他服務。
匯出 HTML 與 PDF 前檢查什麼
- 標題層級從 H2/H3 逐級展開,不依賴字級模擬結構;
- 連結文字能說明目的,圖片有替代文字;
- 表格和程式碼區塊在列印寬度內可讀;
- 外部圖片在離線或受限網路中是否仍可存取;
- 原始 HTML 是否被安全清理或直接停用。
本站工具可匯出清理後的 HTML,也可呼叫瀏覽器列印介面儲存 PDF。匯出結果用於歸檔很方便,但如果文件由程式碼產生,仍應保留 .md 原始檔作為可維護版本。
建議的提交前流程
- 在編輯器完成 Markdown 原始碼並執行拼字、連結或文件建置檢查。
- 用線上預覽快速檢查 GFM、程式碼區塊、公式與 Mermaid。
- 切換窄螢幕,檢查表格、長 URL 和程式碼是否溢出。
- 在最終目標平台複核相對圖片、錨點和平台專屬語法。
- 確認文件沒有憑證或不應公開的資訊後再提交或分享。
若重點是儲存庫首頁,可繼續閱讀README.md 線上預覽檢查清單;若只是收到未知副檔名的檔案,則先看.md 檔案開啟方法。