兩種開啟 .md 檔的方式

重點摘要
  • 把檔案拖進上方的區塊,手機則改用選擇檔案按鈕。
  • 檔案由瀏覽器從你的硬碟讀取,不會送到任何地方。
  • .md.markdown.mdown.mkd.txt 開啟方式完全相同。
  • 出現亂碼代表編碼不對,不是檔案壞了。

檔案已經打開,工具的任務就完成了。這一頁要講的是後半段:那些符號原本是什麼、為什麼有些平台只給你原始碼,以及畫面怪怪的時候該怎麼辦。

三個步驟讀到排版後的文件

  1. 把檔案帶進來。從檔案總管、Finder 或下載資料夾把它拖到放置區。手機或平板改按「選擇檔案」,它會打開「檔案」App,存在 iCloud 雲碟、Google 雲端硬碟或 Dropbox 的文件不必先下載就能選取。
  2. 直接讀排版後的內容。手一放開,排版好的文件立刻出現。標題、表格、待辦清單與連結,都跟一般網頁一樣正常運作。
  3. 決定下一步。列印、把文字複製到需要的地方,或帶到編輯器裡修改。本頁最後一節會逐條說明。

哪些檔案打得開,為什麼副檔名不重要

Markdown 檔就是純 UTF-8 文字,副檔名只是掛在後面的標籤。所以 .md.markdown.mdown.mkd 和單純的 .txt,在這裡載入的結果完全一樣。

如果你對這個格式還不熟,什麼是 Markdown 用白話解釋,如何開啟 .md 檔則給你最精簡的答案。

為什麼檔案不會被上傳

檢視器使用瀏覽器的 FileReader API。它只讓這個分頁裡的 JavaScript 讀取你自己選定的那一個檔案。檔案從硬碟讀進來、在記憶體裡轉換、顯示在畫面上。

全程不會被傳送、不會存在任何伺服器,關掉分頁也不會留下副本。這是瀏覽器運作方式帶來的保障,不是一句要你相信的承諾。

插圖:一個 Markdown 檔被拖進瀏覽器視窗,立刻變成排版完成的文件

你原本看到的,與你現在看到的

用記事本或 TextEdit 打開 Markdown 檔,看到的是原始碼。以下是一段真實檔案的內容,跟它存在硬碟上的樣子一模一樣:

# Onboarding checklist

## Before day one
- [x] Laptop ordered
- [ ] Accounts created
- [ ] Desk assigned

Ask **Dana** in ops if anything is missing, and read the
[handbook](docs/handbook.md) first.

| Item      | Owner | Due    |
| :-------- | :---- | -----: |
| Badge     | Ops   | Day 1  |
| VPN token | IT    | Day 2  |

> Anything marked optional can wait until week two.

每個符號變成了什麼

這樣其實已經讀得懂,這正是這個格式的設計目標,只是還沒完成。在上方的檢視器裡,每個符號都變成了排版:

  • 單一個 # 變成文件標題,## 變成下一層的次標題。
  • 三行 - [ ] 變成有真正打勾方塊的待辦清單。
  • **Dana** 變成粗體。
  • 中括號加小括號變成標示為 handbook 的可點連結。
  • 那塊管線符號變成有框線、Due 欄靠右對齊的表格。
  • 最後一行變成內縮的引用。

符號是指令,不是雜訊

這就是「讀 Markdown 檔」和「檢視 Markdown 檔」的差別。那些標點不是勉強容忍的雜訊,而是一組指令,檢視器不過就是負責照著做的東西。

想靠肉眼看懂一份檔案?語法速查表把所有指令列在同一頁上。

各平台拿 .md 檔怎麼辦

.md 檔之所以讓人覺得麻煩,是因為沒有任何作業系統把它認養下來。每個平台都能讓你看到文字,但幾乎沒有一個能讓你看到排版。

開啟位置實際情形顯示排版說明
Windows 11 點兩下常常跳出「選擇開啟方式」系統沒有替 .md 註冊預設程式
Windows 記事本顯示原始碼拿來閱讀沒問題,完全沒有預覽
macOS 快速預覽(空白鍵)顯示原始碼很快,但符號照樣露出來
macOS TextEdit顯示原始碼可能提議轉成 RTF,請拒絕
Linux 文字編輯器或 Kate原始碼,附語法上色Kate 裝外掛後可以預覽
VS Code原始碼加預覽窗格是,按 Ctrl+Shift+V桌面最佳選擇,但要完整安裝
GitHub 或 GitLab 網頁直接在倉庫裡渲染僅限已推送到倉庫的檔案
Google 雲端硬碟預覽純文字預覽用文件開啟會轉檔並破壞語法
Gmail 附件預覽純文字,有時直接拒絕先下載,再拿到這裡開啟
iOS 或 iPadOS 檔案 App純文字預覽改用 Safari 搭配上方的選擇檔案
Android 檔案或雲端硬碟純文字,或找不到程式改用 Chrome 搭配上方的選擇檔案
本頁的 Markdown 檢視器立即渲染不必安裝,也不會上傳

你應該住在哪一列

規律很明顯:想看到文字,到處都很容易;想看到排版,就得靠程式編輯器或瀏覽器。

如果 Markdown 對你來說是一個月碰一次的東西,開一個瀏覽器分頁顯然比較輕鬆。如果一週要處理好幾次,安裝 VS Code 或專門的編輯器就開始划算了。

小提醒:與其到處找 App,不如把這一頁加進書籤。一個分頁就能打開的檢視器,勝過一個還要跟資訊部門解釋的安裝需求。

常見問題與修法

在這裡看起來壞掉的檔案,多半其實沒事。原因幾乎只有兩種:檔案存錯了,或裡面的 Markdown 有個小失誤。

檔案本身的問題

  • 中文或重音字變成亂碼。出現 中文 這類症狀,代表檔案被存成 Big5 或 Windows-1252 之類的舊編碼。Markdown 檔慣例上是 UTF-8:用程式編輯器把原始檔重新存成 UTF-8,再拿回這裡開啟即可。千萬不要用手把亂碼重打過去,因為底層的位元組其實是對的。
  • 檔名變成 notes.md.txtWindows 會隱藏已知的副檔名,所以一個好意的「另存新檔」就多加了一層。內容完全沒被動過。在檔案總管的「檢視」分頁打開副檔名顯示再改回來,或乾脆直接拿來這裡開,因為 .txt 載入結果一模一樣。
  • 文件裡的圖片沒有出現。Markdown 是用相對路徑引用圖片的,例如 ![chart](img/chart.png)。檔案單獨用電子郵件寄出時,旁邊那個資料夾並沒有跟著走。文字仍然正常渲染。

Markdown 內容的問題

  • 文件少了一半。檢查是不是有未關閉的程式碼圍籬。多出來的三個反引號之後的每一行都會被當成程式碼,正確的檢視器會忠實呈現這個結果。把結尾的圍籬補上,內容就全部回來了。
  • 換行好像都被吃掉了。這不是錯誤。Markdown 會把連續的行合併成同一段,只有空白行才會開新的一段。原始檔看起來很密,渲染後仍是整齊的段落。
  • 表格變成一排管線符號。它的分隔列不見了、寫錯了,或表格上方少了空白行。
  • 有些語法有效、有些無效。待辦清單、表格、刪除線與自動連結屬於 GitHub 風格 Markdown,本檢視器支援。另外還多支援三項:標了語言代碼的程式碼圍欄會上色、$數學式$ 由 KaTeX 排版、標成 mermaid 的圍欄會畫成圖表。註腳與定義清單則是各自獨立的擴充,本檢視器沒有實作。

其中表格壞掉的回報遠遠多於其他項目。用表格產生器重建再貼回去,或先讀表格指南裡的精確規則。

注意:如果那些圖片才是文件的重點,不要請對方把圖貼進文字裡。跟寄件者要整個資料夾,或直接要一份匯出的 PDF,圖片就包在檔案裡了。

從檢視到編輯,再送出去

檢視通常只是第一步。看得懂之後,你多半還想改點東西、把它轉寄出去,或轉成收件人不會有疑問的格式。

想修改內容

打開首頁的 MD Editor,把內容貼進去。左邊是原始碼、右邊是即時預覽,還有附鍵盤快速鍵的排版工具列,以及存在你自己瀏覽器裡的自動草稿。

改完後,從工具列下載一份新的 .md 檔,照原路寄回去就好。

想交給不碰 Markdown 的人

想從此不再只是收件人

如果 .md 檔一直寄到你的信箱,花十分鐘學會自己寫其實很划算。語法真的很少,完整指南照順序全部講完。

學到的東西可以原封不動用在 GitHub、Notion、Obsidian、Discord,以及每一次跟 AI 助理的對話裡。剩下的問題,常見問題都有解答。

相容性資料驗證日期

常見問題

開啟檔案時會被上傳嗎?

不會。檢視器使用瀏覽器的 FileReader API,讓這個分頁裡的 JavaScript 讀取你自己選定的檔案。檔案不會被傳送、也不會存在任何伺服器,機密文件在這裡是安全的。

可以開啟哪些檔案類型?

.md.markdown.mdown.mkd 與純 .txt 都可以。它們裝的是同一種東西,也就是普通的 UTF-8 文字,副檔名只是換個標籤。詳見如何開啟 .md 檔

為什麼檔案裡的圖片沒有顯示?

因為 Markdown 用相對路徑引用圖片,而單獨寄來的 .md 檔並沒有帶著那些圖片所在的資料夾。文字仍然會正常渲染。請寄件者給你整個資料夾,圖片很重要的話就請對方改給 PDF。

手機或平板可以用嗎?

可以。請用選擇檔案按鈕而不是拖曳;在 iOS 與 Android 上它會打開「檔案」App,讓你直接從 iCloud 雲碟、Google 雲端硬碟或 Dropbox 挑選文件,不必先下載。

看完之後可以直接編輯嗎?

可以。把文字複製到 MD Editor,那裡有即時預覽、排版工具列與自動儲存,改完再下載一份新的 .md 檔即可。

延伸閱讀

立即使用編輯器

開啟編輯器