Markdown 轉 HTML(即時預覽)

在左邊輸入 Markdown,HTML 程式碼和預覽畫面會即時更新。支援 GitHub 風格的表格、待辦清單和程式碼區塊。

結果

正在載入轉換引擎…

Markdown 轉 HTML使用方法

  1. 在左側輸入框用 Markdown 語法撰寫內容,或直接貼上 README.md 的內容。
  2. 在右側預覽查看實際呈現的樣子,切換到HTML 程式碼分頁則可看到轉換後的標籤。
  3. 按複製 HTML貼到部落格的 HTML 編輯模式或電子報範本,或按存成 .html 檔後用瀏覽器開啟。
  4. 撰寫中的內容會自動儲存在這個瀏覽器裡,下次再來時仍會保留。

Markdown 語法整理(常用寫法)

效果MarkdownHTML 結果
標題# 標題1、## 標題2<h1>、<h2>
粗體/斜體**粗體**、*斜體*<strong>、<em>
刪除線~~刪除~~<del>
連結[Tooljip](https://tooljip.com)<a href>
圖片![說明](圖片網址.png)<img>
清單- 項目、1. 項目<ul>、<ol>
待辦清單- [x] 已完成核取方塊清單
引用> 引用文字<blockquote>
行內程式碼`code`<code>
程式碼區塊```js … ```<pre><code>
表格| 名稱 | 值 |
|---|---|
<table>
分隔線---<hr>

Markdown 轉成 HTML 的規則與注意事項

Markdown 是用容易閱讀的文字符號標示文件結構,再由轉換器把這些符號換成 HTML 標籤。Tooljip 使用廣受採用的 marked 函式庫,並採 GitHub 風格(GFM)規則,所以結果和 GitHub README 幾乎一樣。

  • 換行:只按一次 Enter 會接在同一段落裡。要分段,請在中間空一行。
  • 清單縮排:子清單請用 2~4 個空白縮排。
  • 特殊符號:想讓 * 或 # 照原樣顯示,請在前面加上反斜線(\*)。
  • 直接寫 HTML:Markdown 裡可以混用 HTML 標籤,轉換後的程式碼會原樣保留。
  • 中文排版:粗體或斜體的符號緊貼中文字時,偶爾會因前後標點而無法正確解析;若效果不如預期,可在符號外側加一個空白再試試。

預覽畫面經過安全隔離

就算從別處複製來的 Markdown 夾帶了 <script> 之類的程式碼,Tooljip 的預覽也是在不執行指令碼的隔離區域(sandbox iframe)中顯示,因此單純查看預覽並不會影響你的瀏覽器。

不過,若要把轉換後的 HTML 直接放到自己的網站上,情況就不同了。如果要把外部取得的 Markdown 用在留言板或服務中,務必先在伺服器端做過濾處理(sanitize),只保留允許的標籤。

用在部落格與 README 撰寫

GitHub README、Notion 或 Obsidian 筆記、HackMD 共筆、技術部落格大多使用 Markdown;反過來,部分部落格平台或電子報編輯器只接受 HTML。先用 Markdown 快速打草稿,再用這個工具產生 HTML 貼上,就能大幅節省排版時間。想知道文章字數,可以用字數統計確認。

常見問題

可以拿來預覽 GitHub README 嗎?
可以。本工具支援 GitHub Flavored Markdown(表格、待辦清單、刪除線、自動連結),大部分內容看起來都會一樣。但 GitHub 專屬功能(議題編號自動連結、數學公式、圖表)不支援。
「存成完整 HTML 文件」有什麼不同?
勾選後,存出的檔案會包含 <html>、<head>、UTF-8 字元編碼設定和基本樣式,可直接用瀏覽器開啟,中文也不會變亂碼。取消勾選則只儲存內文標籤,方便嵌入其他網頁。
我寫的 Markdown 會被儲存嗎?
撰寫中的內容只會自動儲存在這個瀏覽器裡,不會傳送到伺服器。按下清除按鈕後,已儲存的內容也會一併刪除。
可以把 HTML 轉回 Markdown 嗎?
目前只支援 Markdown 轉 HTML 這個方向,不提供 HTML 轉 Markdown 的功能。
需要註冊或付費嗎?
不需要。本工具完全免費、免註冊,轉換都在你的瀏覽器中完成。

最後更新:2026-10-06