Markdown 預覽器

實測範例：一段會被清理的 HTML

在左側貼上 `# Title` 加一行 `<script>alert(1)</script>` 加一行 `- item one`，右側預覽會顯示一個 h1 標題與一個項目清單，但 script 標籤整段消失，不會執行、也不會以文字形式出現，因為 DOMPurify 會在渲染前移除不安全的元素與屬性。

每次在輸入框打字都會即時重新渲染（監聽 input 事件），沒有儲存草稿的功能；重新整理或關閉分頁後，輸入的內容會完全消失，沒有自動儲存或還原機制。

• 驗證方法一：按「複製 HTML」把清理後的內容貼到純文字編輯器，確認裡面沒有 <script>、onclick 等可執行片段。
• 驗證方法二：下載 HTML 後在瀏覽器開啟獨立檔案，比對排版與左側原始 Markdown 的標題層級、清單與程式碼區塊是否一致。

連結行為與比較：什麼時候該用繪圖板而不是預覽器

預覽區塊裡的連結是不能點擊的：程式碼會攔截預覽內 <a> 標籤的點擊事件並呼叫 preventDefault()，所以貼上連結後想確認網址是否正確，必須用滑鼠懸停查看狀態列，或直接檢視左側原始 Markdown 文字，而不是在預覽中點下去。

如果你需要的是手繪草圖、簽名或流程示意圖而不是格式化文字，這個工具幫不上忙；本站的線上繪圖板可以手繪並匯出 PNG，流程圖製作工具則專門處理有方向箭頭的步驟圖，兩者都不會解析 Markdown 語法。

如何使用

1. 在左側輸入 Markdown。
2. 在右側即時檢查結果。
3. 複製或下載清理後的 HTML。

常見使用情境

• 預覽 README 內容。
• 撰寫技術文件與文章草稿。

適合誰使用

• 撰寫 README 與技術文件的開發者
• 需要預覽筆記與文章草稿的作者
• 學習 Markdown 語法的學生

實際案例

注意事項

• 預覽不會上傳或儲存內容，重新整理頁面後草稿會消失。
• 清理後 HTML 降低腳本風險，但無法替你確認外部連結或圖片內容是否可信。
• 不同平台的 Markdown 方言不完全相同，正式發布前應在目標平台再次預覽。