這個線上 Markdown 編輯器怎麼用
編輯器分成兩個窗格。左邊是輸入區:直接打純文字的 Markdown,就像你在 README 或筆記軟體裡寫的一樣。右邊是即時預覽 - 每敲一個鍵就重新渲染一次,你在那裡看到的,就是文件轉成 HTML 之後的最終樣貌。在手機或小螢幕上,兩個窗格會改為上下堆疊;捲動編輯區時,預覽區也會同步捲動,永遠跟著你正在寫的位置。
工具列會教你語法
窗格上方是排版工具列。你不一定要用它 - Markdown 本來就是設計來用手打的 - 但它是最快的學習途徑。選取一個詞、點一下 B,編輯器就會幫你套上 **兩組星號**;點表格按鈕,游標處立刻出現一個現成的三欄表格,含標題列與對齊線,直接填內容就好。每個按鈕插入的都是真實、正確的語法,而不是把語法藏起來,所以每一次點擊都是一堂小小的語法課。
字數統計與自動儲存
以上這些都在本機完成,這也是這個線上 Markdown 編輯器與桌面軟體最實際的差別:不必安裝、不必登入。最下方的狀態列即時顯示字數、字元數與行數,每次自動儲存也會悄悄提示你。第一次造訪時會載入一份示範文件,看完就可以刪掉,開始寫你自己的東西。語法卡關的話,Markdown 完整教學會一步步帶你走過所有用法。
邊打字,邊看到最終發佈的樣子
學 Markdown 最大的障礙是「不確定感」:剛剛那個星號真的有效嗎?MD Editor 徹底消除這種疑慮。每敲一個鍵,預覽窗格都會立即重新渲染,連結打錯字、程式碼區塊忘記關閉,當下就看得到 - 而不是發佈之後才發現。
它渲染的是 GitHub 使用的方言
預覽使用 GitHub 風格 Markdown(GFM)渲染,這是 GitHub、GitLab 與多數現代工具採用的方言。表格、待辦清單、刪除線、程式碼區塊,全部與你的 README 或部落格上呈現的一模一樣。
程式碼、數學公式與圖表也會渲染
程式碼圍欄只要在反引號後面標上語言代碼就會上色;不標的話會維持素色,因為猜錯語言只會上錯顏色。夾在錢字號之間的數學式由 KaTeX 排版,標成 mermaid 的圍欄則會畫成圖表。這幾套函式庫都只在文件真的用到時才載入,所以純文字文件一個都不會下載。
工具列會替你插入正確的語法 - 選取文字後按 Ctrl+B 就是粗體。用久了語法自然記住,你會漸漸不再需要按鈕。這正是我們的目的:讓編輯器在使用中教會你 Markdown。
Markdown 編輯器鍵盤快速鍵
最常用的排版動作都有鍵盤快速鍵,讓你的手完全不用離開鍵盤。macOS 上請把 Ctrl 換成 Cmd - 兩者都支援。
| 快速鍵 | 動作 | 插入的內容 |
|---|---|---|
| Ctrl+B | 粗體 | 將選取文字包進 **…** |
| Ctrl+I | 斜體 | 將選取文字包進 *…* |
| Ctrl+K | 連結 | 將選取文字包進 […](網址),並附上預留網址 |
| Ctrl+S | 儲存 | 將文件下載為 .md 檔 |
| Tab | 縮排 | 插入兩個空格 - 巢狀清單與程式碼的好幫手 |
快速鍵是線上 Markdown 編輯器好不好用的關鍵,所以這裡刻意只保留最常用的幾組,並且沿用桌面編輯器的既有習慣。Ctrl+S 值得特別一提:它不會叫出瀏覽器那個沒什麼用的「儲存網頁」視窗,而是直接下載你真正的 Markdown 檔案。這是你在每個桌面編輯器裡早就養成的肌肉記憶,在這裡被用在更對的地方。而 Tab 鍵被攔截用於縮排,所以要做子清單,只要在行首按一下 Tab 就行。
匯出你的作品
文件完成後,你有四種方式把它帶出編輯器,全部都在瀏覽器本機執行:
四種匯出方式
下載 .md 會把原始 Markdown 存成檔案。這是 GitHub 儲存庫、Hugo 或 Jekyll 等靜態網站產生器的標準格式,Obsidian、Logseq、Zettlr 這些筆記軟體也都能直接開啟。
下載 .html 會產生一個內嵌樣式的獨立 HTML 檔。任何瀏覽器都能打開、不需要外部資源,外觀乾淨俐落,直接寄給同事或附在工單裡都沒問題。
複製 HTML 只複製渲染後的標記 - 不含 <html> 或 <head> 外框 - 到剪貼簿。要貼進 WordPress 的程式碼編輯器、知識庫或電子報範本時,這正是你需要的形式,因為外層頁面已經有自己的樣式。
列印會以渲染後的預覽開啟瀏覽器的列印視窗。目的地選「另存為 PDF」,兩下點擊就得到一份精美的 PDF - 不用轉檔網站、不用上傳、沒有浮水印。想進一步了解各種格式的適用時機,請見Markdown 與 HTML 的比較。
自動儲存與隱私:瀏覽器內的 Markdown 編輯器
你輸入的內容會在停筆片刻後自動存進瀏覽器的 localStorage - 狀態列會短暫顯示「已儲存至本機」。關閉分頁、重開電腦、下週再回來,草稿都會在原地等你,頁面載入時自動還原。
關鍵詞是「本機」。你的文字只存在你自己的裝置上,別無他處。沒有帳號、沒有雲端同步,也沒有任何伺服器會收到你的文字 - 解析、預覽、匯出全部由 JavaScript 在你的分頁裡完成。因此,那些你不會隨便貼到陌生網站的內容 - 內部文件、尚未發佈的文章、有保密協議的資料 - 在這裡都可以放心撰寫。
僅限本機儲存的另一面是:草稿與你的瀏覽器設定檔共存亡。清除瀏覽資料(或使用無痕視窗,關閉時儲存空間會一併清除)之後,草稿就消失了 - 我們無法幫你找回來,因為我們從來沒有拿到過。值得養成的習慣很簡單:重要文件就按 Ctrl+S,把 .md 檔存到安全的地方。自動儲存是這次寫作的安全網,不是備份系統。完整細節請見隱私權政策。
為什麼要用 Markdown 寫作?
- Markdown 用幾個標點符號排版,不必點工具列按鈕。
- 它以純文字保存,所以
.md檔在任何編輯器都能打開,而且永遠打得開。 - 練習十分鐘,就能涵蓋你日後幾乎所有會用到的語法。
Markdown 是一種用簡單符號排版文字的方法:# 代表標題、**粗體** 代表強調、- 代表清單。它由 John Gruber 與 Aaron Swartz 在 2004 年設計,目標是讓文件以純文字閱讀時依然通順,同時又能完美轉換成 HTML。
二十年後,Markdown 已成為技術世界的預設寫作格式。GitHub 的 README、Reddit 留言、Discord 訊息、Notion 頁面、Obsidian 筆記、Hugo 與 Jekyll 部落格,甚至 ChatGPT 的回答 - 全都是 Markdown。學會它只需要十分鐘,之後做筆記、寫文件、發佈內容,再也不用跟複雜的工具列搏鬥。
如果你是完全的新手,建議先讀我們的Markdown 白話入門,寫作時再搭配語法速查表隨查隨用。
五分鐘寫出你的第一份 Markdown 文件
你不需要花整個週末看教學。打開編輯器,輸入一行以 # 開頭的文字 - 這就是標題。按兩次 Enter 再寫一句普通的話 - 這就是段落。用兩個星號包住文字是粗體,一個星號是斜體。
連續三行以 - 開頭,就是一份清單。把網址放進 [文字](網址),就是一個連結。用三個反引號圍住程式碼,就是一個程式碼區塊。到這裡,你會的 Markdown 已經超過多數人一輩子用到的量。
小提醒:清單或標題前面記得空一行。少了那一行空白,是 Markdown「沒有生效」最常見的原因,而上方的即時預覽會在你打錯的當下就顯示出來。
其餘的 - 表格、待辦清單、註腳、圖片 - 隨時可以在速查表查到,而即時預覽會逐鍵確認你的輸入。動手打五分鐘,勝過閱讀一小時。
一張表看完整個語言
Markdown 的核心塞得進一張小表格。以下真的就是這個語言的主體:
| 你輸入 | 你得到 |
|---|---|
# 標題 | 最上層標題 |
**粗體** / *斜體* | 粗體 / 斜體 |
- 項目 | 符號清單項目 |
1. 項目 | 編號清單項目 |
[文字](網址) | 超連結 |
 | 嵌入圖片 |
`程式碼` | 行內程式碼 |
> 引言 | 引用區塊 |
想要完整的全貌 - 每個元素、每個邊角案例、每個常見錯誤 - Markdown 完整指南照順序全部講清楚,表格指南則專門處理最容易讓人跌倒的那一關。
加快 Markdown 寫作速度的訣竅
先寫標題。動筆寫內文之前,先用 # 與 ## 把文件的骨架列出來。預覽會立刻呈現整體大綱,在既有結構下填段落,遠比邊寫邊想架構快得多。
讓工具列教你語法。一開始儘管放心用按鈕,但留意它們插入了什麼。插過十幾次表格之後,你會發現自己已經能默寫 | --- | 那一行 - 這時工具列就功成身退,你的手再也不必離開鍵盤。
把速查表放在隔壁分頁。Markdown 語法速查表把所有語法濃縮在一頁。「巢狀清單怎麼寫來著?」在那裡查只要五秒,在編輯器裡試錯卻可能花上一分鐘。
用真實筆記練習。Markdown 要用在真正需要的事情上才記得住:會議記錄、附核取方塊的行李清單、副業專案的 README。十分鐘的真實寫作,勝過一小時的教學文章。
相信預覽,不要相信記憶。右邊看起來不對就馬上修 - 清單前少了空行、程式碼區塊忘了關閉,這些問題在預覽裡一目了然,在原始碼裡卻幾乎看不出來。
今天誰在用 Markdown 寫作?
開發者是最早的一群:GitHub 上每一份 README、每一個 issue、每一段 pull request 描述都是 Markdown,用的是 GitHub 風格方言。但這個格式早就走出了終端機。
接著換其他人跟上
技術寫作者用 MkDocs、Docusaurus 之類的工具,把整個文件網站建立在 .md 檔上。部落客用它為 Hugo、Jekyll、Astro 寫文章。學生在 Obsidian 和 Notion 做筆記,兩者骨子裡都是 Markdown。研究者用它起草論文,再用 Pandoc 轉成 Word 或 LaTeX。而每個跟 AI 助理聊天的人,每天都在讀 Markdown 排版的回答,不管有沒有意識到。
這種廣度正是「學一次就好」的實際理由:同樣十個符號,通用於你的筆記軟體、團隊 wiki、部落格和程式碼倉庫。如果你還在格式之間猶豫,Markdown 與 HTML 比較清楚列出兩者各自的勝場。
完整的學習資源庫,雙語言全部免費
MD Editor 不只是工具。整個網站是一套可以照順序讀完的 Markdown 課程,提供英文與繁體中文:
- 什麼是 Markdown? - 白話入門:歷史、設計哲學與使用場景。
- Markdown 完整指南 - 從標題到行內 HTML,每個語法元素附範例。
- 語法速查表 - 一頁看完整個語言,適合加入書籤或列印。
- Markdown 表格 - 對齊、跳脫管線符號、儲存格內格式,以及會弄壞渲染的錯誤。
- GitHub 風格 Markdown - 待辦清單、警示區塊、提及、註腳,以及 GFM 增加的一切。
- Markdown 與 HTML 比較 - 誠實分析兩種格式各自適合的時機。
- 常見問題 - 直接回答大家真正會問的問題,每一題都有自己的深入頁面。
指南之外還有七個工具
指南之外還有七個免費 Markdown 工具:用 Markdown 轉 HTML 轉換文件、用 Markdown 轉 PDF 儲存、在表格產生器裡做表格,或用 Markdown 檢視器打開別人傳來的檔案。每一個都跟上方的編輯器一樣,在你的瀏覽器裡執行。
整套資源完全免費、沒有廣告;關於 MD Editor 說明了誰在經營以及為什麼要做。每一頁都互相連結,從哪裡開始都能一路讀下去。閱讀時記得在另一個分頁開著編輯器:Markdown 是靠手指記住的,不是靠眼睛。