Markdown 預覽器

免費線上 Markdown 預覽器,即時渲染 Markdown 語法為 HTML,支援分割畫面、即時預覽、複製 HTML、下載 Markdown 檔案。

立即使用Markdown 預覽器(免費、免註冊)

在左邊(手機在上方)打或貼上 Markdown,右邊立刻照 GitHub 的規則畫出排版結果:標題、清單、表格、任務清單、程式碼上色都看得到。可以切換「分割、原始碼、預覽」三種檢視,按「複製 HTML」拿到轉好的 HTML,或下載成 .md 檔;下方同時顯示字元數、行數、中文字數與英文單字數。全部在瀏覽器處理,內容不會上傳。

三種檢視與四個按鈕

  • 分割:左右(手機上下)同時看原始碼與預覽,邊打邊對照。
  • 原始碼/預覽:只看其中一邊,編輯區或預覽區變成整個寬度,適合長文件。
  • 複製 MD:把整份 Markdown 原文放進剪貼簿。
  • 複製 HTML:把轉好的 HTML 放進剪貼簿,貼進網站後台、電子報或 HTML 編輯器;你在 Markdown 裡自己寫的 HTML 會原樣保留。
  • 下載:存成 document.md,之後用任何文字編輯器都能打開。
  • 清除:一鍵清空編輯區(沒有確認視窗,重要內容先複製或下載)。

打開頁面時會先放一份示範文件,涵蓋標題、清單、引用、程式碼、表格、連結、圖片與任務清單,直接改它就能看到每種語法的效果。

換行與分段的規則

預覽依 GitHub 的規則:單純按一次 Enter 不會換行。下面三段是實際轉出來的 HTML:

只按一次 Enter:接在同一段

第一行
第二行

→ <p>第一行
第二行</p>

行尾加兩個空白:段落內換行(<br>)

第一行  
第二行

→ <p>第一行<br>第二行</p>

空一行:分成兩段

第一段

第二段

→ <p>第一段</p>
<p>第二段</p>

想要「按 Enter 就換行」,可以改用站上的 Markdown 轉 HTML(有「自動換行」開關)或 Markdown 編輯器(預設就會換行)。

中文寫 Markdown 常踩的坑

以下範例都是用這個預覽器的轉換規則實際跑出來的:

粗體包住引號、後面緊接中文:星號原樣露出來

這是**「重點」**文字

→ <p>這是**「重點」**文字</p>

星號外側各加一個空白就正常

這是 **「重點」** 文字

→ <p>這是 <strong>「重點」</strong> 文字</p>

網址後面直接接全形逗號:逗號和後面的字被吃進連結

官網https://example.com,歡迎

→ <p>官網<a href="https://example.com%EF%BC%8C%E6%AD%A1%E8%BF%8E">https://example.com,歡迎</a></p>

網址前後留空白:連結只到網址結尾

官網 https://example.com ,歡迎

→ <p>官網 <a href="https://example.com">https://example.com</a> ,歡迎</p>

# 後面沒有空白:不是標題

#標題

→ <p>#標題</p>

原因是 Markdown 判斷粗體與網址的規則以英文標點與空白為準;中文全形標點緊貼著符號時,就會出現上面的情況。

統計數字怎麼算

下方四格統計
項目怎麼算
字元數整份原文,含空白與 # * 這些符號;一個 emoji 算 1
行數原文的行數,空行也算
中文字數中文字(含日文假名、注音),標點不算
英文單字以單字計,don't 算 1 個

算的是 Markdown 原文,不是預覽出來的文字;要算文章本身的字數,先切到預覽選取文字,再貼到站上的字數統計工具。

預覽的限制

  • 不能開檔、不會自動存:這一頁沒有開啟 .md 檔的按鈕,內容也只在目前分頁,重新整理就回到示範文件。要開檔或存檔,改用 Markdown 編輯器(可匯入 .md,未登入存 1 份在這台電腦,登入可存雲端)。
  • 圖片要完整網址:![說明](image.jpg) 這種相對路徑在這裡找不到圖;請用 https:// 開頭、可以公開瀏覽的圖片網址。
  • 預覽會拿掉可執行的內容:script、iframe、onerror 這類會執行程式的 HTML,以及表單、按鈕、style 標籤不會出現在預覽裡;「複製 HTML」拿到的仍是你寫的原樣。
  • 沒有數學公式與流程圖:LaTeX 數學公式照原文顯示、Mermaid 流程圖語法顯示成程式碼區塊,腳註語法也不支援;流程圖可以用站上的 Mermaid 圖表製作器。
  • 預覽裡的連結:點下去會開新分頁,編輯中的內容不會因為點連結而不見。

Markdown 預覽器功能特點

  • 即時渲染預覽(GitHub 風格:表格、任務清單、刪除線、巢狀清單、圖片)
  • 程式碼區塊依語言上色
  • 分割畫面模式
  • 複製 Markdown 或轉好的 HTML
  • 下載 Markdown 檔案
  • 字數統計

如何使用Markdown 預覽器?

  1. 在左側(手機在上方)輸入 Markdown 語法
  2. 右側(手機在下方)即時顯示渲染結果
  3. 可切換分割/原始碼/預覽模式
  4. 點擊複製或下載按鈕匯出

Markdown 預覽器常見問題

支援哪些 Markdown 語法?

支援 GitHub 風格的常用語法:標題、粗體、斜體、刪除線、巢狀清單、引用、程式碼區塊(依語言上色)、表格、任務清單、連結與圖片。

預覽結果和最終呈現一樣嗎?

預覽依 GitHub 的規則轉換(單一換行不會換行,要空一行才分段)。但不同平台可能有些微差異,建議在目標平台上做最終確認。

支援即時預覽嗎?

是的,編輯器提供即時預覽功能,您在左側輸入 Markdown 語法時,右側會同步顯示渲染後的效果,方便您即時調整格式。

Markdown 裡可以寫 HTML 嗎?

可以,<kbd>、<details>、<br> 這類排版標籤會照常顯示,「複製 HTML」也會保留你寫的 HTML。預覽為了安全會拿掉 script、iframe、onerror 這類會執行程式的內容。

為什麼我按 Enter 換行,預覽卻接在同一行?

Markdown 的標準規則是單一換行不算換行。要在同一段裡換行,就在行尾加兩個空白;要分段就空一行。想要按 Enter 就換行,可以用站上的 Markdown 編輯器,它預設就是這樣。

預覽裡的圖片為什麼顯示不出來?

多半是圖片網址用了相對路徑(例如 image.jpg)或是需要登入才看得到的網址。請改成 https:// 開頭、公開可瀏覽的完整圖片網址;部分網站禁止別的網頁引用它的圖片,也會顯示不出來。

可以打開電腦裡的 .md 檔預覽嗎?

這一頁沒有開檔按鈕,可以用文字編輯器打開 .md 檔全選複製、貼到左邊。想直接開檔,用站上的 Markdown 編輯器(開啟文件→匯入 .md 檔案)或 Markdown 轉 PDF(開啟 .md 檔案)。