ToolLab

Hello Markdown

This is a bold and italic text demo.

Features

  • Real-time preview
  • GitHub Flavored Markdown
  • Syntax highlighting for code blocks

Code Example

function greet(name) {

  return Hello, ${name}!;


}

Table

FeatureStatus
Bold✅
Links✅
Tables✅
This is a blockquote with a link.
  1. First item
  2. Second item
  3. Third item

Markdown 預覽器

左側編寫 Markdown，右側即時查看算繪效果。支援標題、粗體、斜體、連結、圖片、表格、程式碼區塊等語法。一鍵匯出 HTML。

什麼是 Markdown？

Markdown 是由 John Gruber 於 2004 年建立的輕量級標記語言。它允許你使用純文字語法編寫格式化文字，易讀易寫。Markdown 檔案使用 .md 副檔名，廣泛用於 README 檔案、文件、部落格文章、論壇訊息和技術寫作。語法設計直覺：星號表示粗體和斜體，井號表示標題，短橫線表示列表，反引號表示程式碼。

這款免費線上 Markdown 預覽器在你輸入的同時即時算繪。支援所有常用 Markdown 元素，包括標題、段落、粗體、斜體、刪除線、連結、圖片、有序和無序列表、引用區塊、水平分隔線、表格和圍欄程式碼區塊。分割畫面版面讓你同時編輯和預覽，還能將算繪結果匯出為獨立的 HTML 檔案。

核心功能

  • 即時預覽，輸入即刻更新算繪結果
  • 支援分割畫面、純編輯和純預覽三種模式
  • 完整 Markdown 支援：標題、粗體、斜體、刪除線、連結、圖片
  • 表格支援表頭列和對齊
  • 圍欄程式碼區塊語法顯示
  • 引用區塊、有序列表和無序列表
  • 上傳 .md 或 .txt 檔案預覽現有文件
  • 將算繪結果匯出為帶內建樣式的獨立 HTML 檔案
  • 複製原始 HTML 到剪貼簿，方便嵌入其他工具
  • 全螢幕模式，專注無干擾寫作
  • 100% 瀏覽器端處理，不向任何伺服器傳送資料

如何使用

  1. 在左側編輯面板中編寫或貼上 Markdown。
  2. 算繪預覽即刻出現在右側面板。
  3. 透過工具列切換分割畫面、純編輯或純預覽模式。
  4. 使用上傳按鈕載入現有的 .md 檔案。
  5. 點選 HTML 將算繪結果下載為獨立 HTML 檔案。
  6. 點選複製 HTML 將原始 HTML 標記複製到剪貼簿。

Markdown 語法速查

  • 標題：使用 # 表示 h1，## 表示 h2，### 表示 h3，最多到 ######
  • 粗體：用 **雙星號** 包裹文字
  • 斜體：用 *單星號* 包裹文字
  • 刪除線：用 ~~雙波浪線~~ 包裹文字
  • 連結：使用 [文字][連結] 語法
  • 圖片：使用 ![替代文字][圖片連結] 語法
  • 無序列表：行首使用 -、* 或 +
  • 有序列表：行首使用 1.、2.、3.
  • 程式碼區塊：用三個反引號在獨立行包裹
  • 行內程式碼：用單個反引號包裹
  • 引用區塊：行首使用 >
  • 水平線：在獨立行使用 ---
  • 表格：使用管道符 | 和短橫線 - 建立欄和表頭

常見使用情境

  • 編寫和預覽 GitHub 儲存庫的 README 檔案
  • 撰寫部落格文章和技術文件
  • 提交版本控制前預覽 Markdown 效果
  • 將 Markdown 筆記轉換為 HTML 嵌入網站
  • 教學 Markdown 語法，提供即時視覺回饋
  • 為支援 Markdown 的平台快速格式化文字

Markdown 寫作技巧

  • 段落之間留空行以取得正確的間距
  • 按層級使用標題：從 # 開始，子節逐級增加
  • 程式碼區塊用 4 個空格縮排，或使用三個反引號的圍欄程式碼區塊
  • 表格中對齊管道符可提高原始碼可讀性
  • 長連結使用參考式連結保持 Markdown 簡潔
  • 發布前預覽 Markdown 以發現格式問題

常見問題