免費線上 Markdown 編輯器,附完整繁體中文教學

左邊輸入 Markdown,右邊即時呈現 GitHub 風格的預覽。免費、免帳號,草稿只自動儲存在你自己的瀏覽器裡。

  • 100% 免費、免註冊
  • 即時預覽
  • 支援 GFM
  • 匯出 .md / .html
  • 英文與繁體中文介面
Markdown
預覽

這個線上 Markdown 編輯器怎麼用

編輯器分成兩個窗格。左邊是輸入區:直接打純文字的 Markdown,就像你在 README 或筆記軟體裡寫的一樣。右邊是即時預覽 - 每敲一個鍵就重新渲染一次,你在那裡看到的,就是文件轉成 HTML 之後的最終樣貌。在手機或小螢幕上,兩個窗格會改為上下堆疊;捲動編輯區時,預覽區也會同步捲動,永遠跟著你正在寫的位置。

工具列會教你語法

窗格上方是排版工具列。你不一定要用它 - Markdown 本來就是設計來用手打的 - 但它是最快的學習途徑。選取一個詞、點一下 B,編輯器就會幫你套上 **兩組星號**;點表格按鈕,游標處立刻出現一個現成的三欄表格,含標題列與對齊線,直接填內容就好。每個按鈕插入的都是真實、正確的語法,而不是把語法藏起來,所以每一次點擊都是一堂小小的語法課。

字數統計與自動儲存

以上這些都在本機完成,這也是這個線上 Markdown 編輯器與桌面軟體最實際的差別:不必安裝、不必登入。最下方的狀態列即時顯示字數、字元數與行數,每次自動儲存也會悄悄提示你。第一次造訪時會載入一份示範文件,看完就可以刪掉,開始寫你自己的東西。語法卡關的話,Markdown 完整教學會一步步帶你走過所有用法。

插圖:雙欄 Markdown 編輯器,上方是工具列,左側為原始文字,右側為渲染後的預覽

邊打字,邊看到最終發佈的樣子

學 Markdown 最大的障礙是「不確定感」:剛剛那個星號真的有效嗎?MD Editor 徹底消除這種疑慮。每敲一個鍵,預覽窗格都會立即重新渲染,連結打錯字、程式碼區塊忘記關閉,當下就看得到 - 而不是發佈之後才發現。

它渲染的是 GitHub 使用的方言

預覽使用 GitHub 風格 Markdown(GFM)渲染,這是 GitHub、GitLab 與多數現代工具採用的方言。表格、待辦清單、刪除線、程式碼區塊,全部與你的 README 或部落格上呈現的一模一樣。

程式碼、數學公式與圖表也會渲染

程式碼圍欄只要在反引號後面標上語言代碼就會上色;不標的話會維持素色,因為猜錯語言只會上錯顏色。夾在錢字號之間的數學式由 KaTeX 排版,標成 mermaid 的圍欄則會畫成圖表。這幾套函式庫都只在文件真的用到時才載入,所以純文字文件一個都不會下載。

工具列會替你插入正確的語法 - 選取文字後按 Ctrl+B 就是粗體。用久了語法自然記住,你會漸漸不再需要按鈕。這正是我們的目的:讓編輯器在使用中教會你 Markdown。

插圖:兩個同步的面板,一側是 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 轉 PDF 儲存、在表格產生器裡做表格,或用 Markdown 檢視器打開別人傳來的檔案。每一個都跟上方的編輯器一樣,在你的瀏覽器裡執行。

整套資源完全免費、沒有廣告;關於 MD Editor 說明了誰在經營以及為什麼要做。每一頁都互相連結,從哪裡開始都能一路讀下去。閱讀時記得在另一個分頁開著編輯器:Markdown 是靠手指記住的,不是靠眼睛。

該有的都有,多餘的都沒有

即時預覽

每一次按鍵都立即重新渲染,毫無延遲,所見即所得。

GitHub 風格 Markdown

表格、待辦清單、刪除線、自動連結、程式碼區塊 - 與 GitHub 完全相同的渲染方式。

文字不離開瀏覽器

免帳號、不上傳、不追蹤你的內容。文件只自動儲存在你自己的裝置上。

隨處匯出

下載 .md 或獨立的 .html 檔、一鍵複製乾淨的 HTML,或直接列印成 PDF。

零干擾寫作

快速極簡的介面,每個排版動作都有鍵盤快速鍵。沒有雜訊、沒有彈窗。

英文與繁體中文

整個網站 - 編輯器與教學指南 - 都提供英文與台灣繁體中文版本。

常見問題

MD Editor 真的免費嗎?

是的,完全免費。沒有帳號、沒有付費方案、沒有使用限制,匯出檔案也沒有浮水印。本站是為 Markdown 社群打造的學習資源。

我的文件存在哪裡?

存在你自己瀏覽器的 localStorage,也就是你的裝置上。你輸入的內容不會傳送到我們的伺服器。清除瀏覽器資料會刪除草稿,重要文件請記得匯出成 .md 檔。

編輯器使用哪一種 Markdown 方言?

GitHub 風格 Markdown(GFM),目前最廣泛使用的方言。它包含原始 Markdown 的全部功能,再加上表格、待辦清單、刪除線與自動連結。詳見 GFM 指南

手機或平板可以使用嗎?

可以。編輯器完全支援響應式設計 - 小螢幕上編輯區與預覽區會上下堆疊,工具列自動換行,每個按鈕都能輕鬆點按。

如何把 Markdown 轉成 HTML?

點工具列的 .html 可下載含樣式的獨立 HTML 檔;點「複製 HTML」則會複製渲染後的原始碼,方便貼進 CMS。整個轉換都在你的瀏覽器本機執行。

頁面載入後可以離線使用嗎?

可以。輸入、預覽、自動儲存與匯出都在瀏覽器本機執行,不需要網路連線。第一次造訪時,Service Worker 還會把編輯器骨架快取起來,所以離線時重新整理或另開分頁也打得開。需要網路的是第一次造訪;沒開過的教學頁則不會被快取。細節請見離線使用的完整說明

檔案大小有限制嗎?

實務上沒有。編輯器可以流暢處理數萬字的文件,長文件的預覽也能在毫秒內重新渲染。唯一的硬性上限是瀏覽器的 localStorage 配額(通常為 5 MB),約等於一百萬字的純文字 - 遠超過任何實際文件的長度。

可以開啟現有的 .md 檔嗎?

目前請先用任何文字編輯器打開檔案,把內容貼進來 - Markdown 就是純文字,不會遺失任何東西。原生的「開啟檔案」按鈕已在開發計畫中。反方向則早已是一鍵完成:點 .md 就能把作品下載成檔案。

預覽跟 GitHub 上顯示的完全一樣嗎?

編輯器使用 GitHub 風格 Markdown(GFM)渲染,所以結構層面 - 表格、待辦清單、刪除線、程式碼區塊 - 與 GitHub 的輸出一致。字型、間距、語法標色等視覺細節會略有不同,因為 GitHub 套用了自己的樣式表,但底層的 HTML 是等價的。

查看全部 15 個問題 →

繼續學習:接著閱讀 Markdown 完整指南。

閱讀語法指南