QQuickKit

Markdown 預覽

即時渲染 Markdown 語法

關於此工具

在 GitHub 上寫 README、寫技術部落格文章、用 Notion 記錄筆記——Markdown 很好用，但不同平台的渲染效果有時候不一樣。把你的 Markdown 貼進來，切到預覽頁籤看渲染結果，確認沒問題再貼出去用。

功能特色

  • ✓切換就能看預覽 — 切到「預覽」頁籤立刻看到渲染結果，改完切回來，確認沒問題再複製走。
  • ✓常用語法都支援 — 標題（# H1 到 #### H4）、粗體、斜體、有序和無序清單、連結、圖片、行內程式碼、程式碼區塊、引言、分隔線、表格。
  • ✓程式碼區塊有獨立樣式 — 三個反引號包起來的程式碼塊有背景色和等寬字型，技術文件讀起來清楚多了。
  • ✓支援 GFM 表格 — GitHub Flavored Markdown 的表格語法可以正常渲染成帶框線的表格，展示資料結構很方便。
  • ✓本地渲染不外傳 — 你的 Markdown 在瀏覽器裡處理，不會傳出去，草稿或未公開的內容可以安心貼。

常見問題

Markdown 和 HTML 有什麼關係？
Markdown 是一層語法糖，寫起來比 HTML 省事，然後再轉成 HTML。**粗體** 變成 <strong>粗體</strong>，# 標題 變成 <h1>，本質上輸出的還是 HTML，只是寫的時候不用打那些標籤。
為什麼按一次 Enter 沒有換行？
標準 Markdown 裡，單一換行不會產生新段落，需要空一行（按兩次 Enter）才分段。同一段落內強制換行，在行尾加兩個空格再按 Enter。這個工具開了 breaks 選項，單一換行也會輸出 <br>，比標準行為更接近你的預期。
GFM 是什麼？
GitHub Flavored Markdown，GitHub 擴展的格式。在標準 Markdown 上加了表格、任務清單（- [ ]）、刪除線（~~文字~~）等。這個工具用 marked 函式庫，大部分 GFM 語法都能渲染。
Markdown 裡可以直接寫 HTML 嗎？
可以，標準 Markdown 允許混入 HTML，渲染時原樣輸出。在這裡自己輸入當然沒問題。但如果你是要在產品裡渲染其他人提交的 Markdown，一定要先用 DOMPurify 之類的工具消毒，不然很容易有 XSS 漏洞。

延伸閱讀