Markdown 線上編輯器
什麼是 Markdown？
Markdown 是一種輕量標記語言，用接近純文字的語法編寫結構化內容。標題、列表、連結、圖片、引用、程式碼區塊和表格都可以用簡單符號表示，再渲染成 HTML 或其他格式。Markdown 編輯器能讓原始碼和預覽對照檢查，快速發現格式錯誤，並更有效率地準備 README、技術文件、部落格文章、筆記、知識庫、更新日誌和產品文案。Markdown 刻意保持簡單，但不同平台支援的擴充並不完全一致，例如 GitHub-Flavored Markdown、Frontmatter、任務列表或 Mermaid 圖表。因此正式發布前仍應在目標系統中確認最終渲染效果。
使用方式
使用方式
- 在左側編輯器輸入 Markdown 文字
- 右側面板即時顯示預覽
- 使用工具列按鈕插入常用語法
- 底端列顯示字數、字元數、行數統計
- 內容會自動儲存至瀏覽器的本機儲存空間
功能
編輯提示
- 預覽的呈現方式可能因平台而異；使用表格、HTML 或擴充 Markdown 功能時，請在目標系統中檢查最終輸出。
- 自動儲存功能在撰寫草稿時相當方便，但清除瀏覽器資料或更換裝置前，請另行備份重要筆記。
使用場景
技術原理
Markdown 渲染通常分為三個步驟：詞法分析器將文字切分為標題、段落、列表和程式碼區塊等語法單元；解析器根據語法規則將符號流轉換為抽象語法樹（AST）；渲染器遍歷 AST 並輸出對應的 HTML。常見的 JavaScript 函式庫包括 marked、markdown-it、remark 和 micromark——它們在打包大小、速度和可擴充性上各有差異，但都遵循 CommonMark 規範。 CommonMark 修正了原始 Markdown 語法的歧義（例如巢狀列表如何縮排、行內程式碼如何界定邊界），使不同實作能產生相同的渲染結果。在 CommonMark 之上，GitHub 加入了 GFM（GitHub Flavored Markdown），新增表格、任務列表（- [ ]）、刪除線（~~）、自動連結和圍欄程式碼區塊；GFM 如今已是事實上的標準，大多數現代 Markdown 工具預設啟用。 程式碼區塊的語法高亮通常由 highlight.js 或 Prism.js 完成，它們在渲染時辨識語言標籤，為關鍵字、字串和註解標記 CSS 類別，再由主題套用顏色。為防止使用者提供的 HTML 觸發 XSS，渲染器通常會將輸出經過 DOMPurify 或類似的白名單過濾器，移除 script、iframe 和 on* 事件屬性——如此一來，貼上他人的 Markdown 也不會執行惡意腳本。
- 解析流程：原始文字經過詞法分析器 → 解析器 → 渲染器變成 HTML，AST 是中間的資料表示。
- 標準：CommonMark 是官方語法；GFM 在其基礎上擴充了表格、任務列表、刪除線、圍欄程式碼區塊和自動連結。
- 函式庫比較：marked 體積小速度快，markdown-it 擁有豐富的插件生態系，remark 建立在 unified 生態系之上，適合文件處理管線。
- 語法高亮：highlight.js 或 Prism.js 在解析時讀取程式碼區塊的語言標籤，為關鍵字、字串和註解標記 CSS 類別。
- XSS 防護：DOMPurify 等函式庫以白名單過濾輸出 HTML，移除 script、iframe 和 on* 事件屬性以防止腳本注入。
- 即時預覽：編輯器監聽輸入事件，對每次變更進行防抖，重新解析後透過差異比對更新右側 DOM，兼顧回應速度與效能。
範例
標題、清單與程式碼區塊
# 標題 1
## 標題 2
- 清單項目 A
- 清單項目 B
- 巢狀清單項目
```javascript
function hello() {
console.log('Hello Markdown');
}
```表格
| 工具 | 類型 | 大小 |
|---------|--------|------|
| Vite | 建置 | 小 |
| Webpack | 建置 | 大 |
| Rollup | 打包 | 中 |引用與連結
> 「Markdown 讓寫作回歸到內容本身。」
> -- John Gruber
參考：[CommonMark Spec](https://commonmark.org)常見問題
支援哪一種 Markdown 規範？
大多數版本採用 CommonMark 加上 GitHub Flavored Markdown 擴充：表格、刪除線、待辦清單、帶語言提示的圍欄程式碼區塊。部分版本也支援 MathJax/KaTeX 數學區塊和 Mermaid 圖表。可以從工具列確認支援哪些功能。
檔案會被上傳嗎？
不會。Markdown 解析和渲染都在你的瀏覽器中由 JS 函式庫完成（通常是 markdown-it 或 remark）。草稿絕對不會離開你的裝置。
即時預覽是怎麼運作的？
你打字的同時，原始碼面板就會被解析並渲染成 HTML 顯示在預覽面板。同步捲動會比對段落位置讓兩個面板對齊。多數版本也支援全螢幕和左右並排切換。
可以匯出檔案嗎？
可以——下載成 .md（原始碼）、HTML（已渲染，可直接嵌入網頁）或 PDF（透過瀏覽器列印引擎）。PDF 輸出會保留標題、清單、程式碼區塊和內嵌圖片。如果需要像素級精準的 PDF，建議把 HTML 貼到正式的文書處理軟體裡再匯出。
關掉分頁後草稿會被儲存嗎？
多數版本會自動存到 localStorage，所以同一個瀏覽器再開就能還原草稿。關掉無痕視窗或清除網站資料就會消失。如果要真正持久儲存，請定期匯出 .md 檔到檔案系統或 git 存放庫。
貼上圖片時會被上傳嗎？
有些編輯器會把貼上的圖片以行內 base64 形式嵌入（在 markdown 原始碼中可見），有些則會上傳到圖床——請留意頁面行為。如果在意隱私，建議先把圖片存到檔案系統，再用相對路徑引用。
可以插入表格、數學公式或圖表嗎？
GitHub Flavored Markdown 表格（| col1 | col2 |）到處都能用。數學區塊（$x^2$）和 Mermaid 圖表（```mermaid）需要明確支援，可以從工具列確認是否有對應按鈕。有支援的版本會在預覽中即時渲染。