Markdown 檢視器與編輯器（支援 Mermaid）

Markdown 文件

撰寫、貼上或開啟 Markdown 檔案，像在 GitHub 上一樣即時預覽：表格、待辦清單、註腳、提示區塊、Mermaid 圖表、LaTeX 公式與語法高亮的程式碼。之後可以下載為 HTML 或儲存為 PDF。所有內容都在你的瀏覽器中處理。

同步捲動

保留換行

---
title: "範例文件"
tags: [markdown, mermaid, katex]
---

# 範例文件

編輯這段文字，即可立即看到結果。支援 **粗體**、*斜體*、~~刪除線~~、`程式碼`、像 https://ittools.tech 這樣的連結以及註腳[^1]。

> [!NOTE]
> GitHub 提示區塊也能使用：試試 TIP、IMPORTANT、WARNING 或 CAUTION。

## 待辦事項與表格

- [x] 撰寫 README
- [ ] 新增圖表

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## 圖表與公式

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: 所有內容都在你的瀏覽器中處理，文件不會傳送到任何伺服器。

0 個單字 · 0 行 · 閱讀約 0 分鐘

運作方式

Markdown 是 README、技術文件、Wiki 以及幾乎所有開發工具中筆記所使用的格式，但每個平台都會加上自己的擴充語法。這個檢視器遵循使用最廣泛的 GitHub Flavored Markdown（GFM）：除了基本語法外，還能呈現表格、待辦清單、刪除線、自動連結、註腳，以及 NOTE、TIP、IMPORTANT、WARNING 和 CAUTION 提示區塊。

標記為 mermaid 的程式碼區塊會轉換成圖表（流程圖、循序圖、類別圖、狀態圖、實體關聯圖、甘特圖、Git 圖等），$ 符號之間的公式由 KaTeX 繪製，其餘程式碼則依指定的語言進行語法高亮。如果文件以 --- 行包住的 YAML 區塊開頭（例如 Jekyll、Hugo 或 Docusaurus 所用的格式），它會顯示為獨立的表格。

文件不會離開你的瀏覽器。其中包含的 HTML 在顯示前會先經過清理，因此開啟第三方的 README 不會執行指令碼；圖表與公式函式庫也只會在文件用到時才下載。

範例

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → Deploy語言標記為 mermaid 的程式碼區塊會繪製成圖表。如果有語法錯誤，程式碼會保持可見，並在下方顯示 Mermaid 的錯誤訊息。

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1標題會取得與 GitHub 相同的 id：轉為小寫、空格換成連字號、移除標點符號，重複時在結尾加上數字。因此，像 [文字](#getting-started) 這樣的連結，在這裡和在儲存庫中的效果完全相同。

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

在標準 Markdown 中，單一換行不會讓段落換行；必須空一行，或在行尾加上兩個空格。GitHub 的留言和 issue 則會保留換行：若要以這種方式顯示，請啟用「保留換行」。

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.以 [!NOTE]、[!TIP]、[!IMPORTANT]、[!WARNING] 或 [!CAUTION] 開頭的引言會顯示為彩色提示區塊，和 GitHub 一樣。在不支援的平台上，則會顯示為一般引言。

使用情境

在把 README 或 CHANGELOG 推送到儲存庫之前，確認它的呈現效果。
不必安裝編輯器就能閱讀下載的 .md 檔案：按下按鈕或直接拖放即可開啟。
測試架構、流程或循序的 Mermaid 圖表，並透過即時預覽修正語法。
將文件轉換成獨立的 HTML 頁面或 PDF，分享給不使用 Git 的人。
以 LaTeX 標記法撰寫包含數學公式的筆記或技術文件。
以完整格式檢視 AI 助理回傳的 Markdown 文字，包括表格與程式碼區塊。

常見問題

可以繪製哪些類型的 Mermaid 圖表？

Mermaid 內建的所有類型：flowchart、sequenceDiagram、classDiagram、stateDiagram-v2、erDiagram、gantt、pie、journey、gitGraph、mindmap、timeline、quadrantChart、sankey、xychart、block、architecture 和 kanban 等。圖表會依網站主題使用淺色或深色配色，並以嚴格模式繪製：標籤文字無法注入 HTML，也無法在點擊時執行程式碼。

如何撰寫數學公式？

行內公式寫在 $ 符號之間，例如 $a^2 + b^2 = c^2$；獨立一行的置中公式寫在 $$ 之間，或放在語言為 math 的程式碼區塊中。語法為 KaTeX 支援的 LaTeX。若要輸入字面上的 $ 符號（例如價格），請在前面加上反斜線；不過，"$5 和 $10" 不會被當成公式，因為第二個 $ 前面有空格、後面是數字。

可以在 Markdown 中使用 HTML 嗎？

可以，和 GitHub 一樣：例如用 details 和 summary 建立可摺疊區段、用 kbd 表示按鍵、sub 和 sup、指定尺寸的 img 或帶有 align 的 p。顯示前會移除指令碼、onclick 等事件屬性、javascript: 連結以及 style 和 form 標籤，因此第三方文件無法執行程式碼，也無法變更頁面的其他部分。

如何轉成 PDF？

透過「匯出」中的「列印或另存為 PDF」，會開啟只包含文件、不含網站介面的列印對話方塊，在其中選擇「另存為 PDF」即可。表格、程式碼區塊和圖表會盡量避免跨頁斷開。如果需要可發布的檔案，「下載 .html」會產生內含樣式的獨立頁面。

為什麼使用相對路徑的圖片無法顯示？

因為檢視器無法存取儲存庫中的其他資料夾：像 ./docs/logo.png 這樣的路徑只存在於你的磁碟或 GitHub 上。以 https:// 開頭的完整網址圖片則可以正常顯示。