Markdown 轉 HTML使用方法
- 在左側輸入框用 Markdown 語法撰寫內容,或直接貼上 README.md 的內容。
- 在右側預覽查看實際呈現的樣子,切換到HTML 程式碼分頁則可看到轉換後的標籤。
- 按複製 HTML貼到部落格的 HTML 編輯模式或電子報範本,或按存成 .html 檔後用瀏覽器開啟。
- 撰寫中的內容會自動儲存在這個瀏覽器裡,下次再來時仍會保留。
Markdown 語法整理(常用寫法)
| 效果 | Markdown | HTML 結果 |
|---|---|---|
| 標題 | # 標題1、## 標題2 | <h1>、<h2> |
| 粗體/斜體 | **粗體**、*斜體* | <strong>、<em> |
| 刪除線 | ~~刪除~~ | <del> |
| 連結 | [Tooljip](https://tooljip.com) | <a href> |
| 圖片 |  | <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 的功能。
需要註冊或付費嗎?
不需要。本工具完全免費、免註冊,轉換都在你的瀏覽器中完成。