# Markdown Viewer

左邊寫 Markdown，右邊即時看結果。**中間那條分隔線可以直接用滑鼠拖曳**，把版面調成你順手的比例。

> [!TIP]
> 你打的內容會自動存在瀏覽器裡。關掉分頁、關掉整個瀏覽器，下次打開都還在。

## 基本語法

**粗體**、*斜體*、~~刪除線~~、`行內程式碼`、[超連結](https://www.waws.idv.tw)，
這些都可以在同一段裡自由混用。

- 無序清單
- 支援巢狀
  - 第二層
    - 第三層
1. 有序清單
2. 會自動編號

### 任務清單

- [x] 左右分欄即時預覽
- [x] 可拖曳的分隔線
- [x] 關掉再開自動還原內容
- [ ] 你的下一個待辦

## 表格

| 功能 | 說明 | 快捷鍵 |
| --- | --- | --- |
| 粗體 | 把選取文字包成 `**` | `Cmd/Ctrl + B` |
| 斜體 | 把選取文字包成 `*` | `Cmd/Ctrl + I` |
| 連結 | 插入 `[文字](網址)` | `Cmd/Ctrl + K` |
| 搜尋 | 開啟搜尋與取代 | `Cmd/Ctrl + F` |
| 下載 | 存成 .md 檔 | `Cmd/Ctrl + S` |

## 程式碼區塊

支援三十多種語言的語法上色，深色與淺色主題各有一套配色：

```typescript
interface Doc {
  text: string
  savedAt: number
}

// 打字後 400ms 才寫入，關閉分頁時再同步補寫一次
const save = (doc: Doc) => localStorage.setItem('mdv-doc', JSON.stringify(doc))
```

```bash
# 也支援 shell、python、go、rust、php、sql⋯⋯
npx nuxt generate && npx wrangler pages deploy .output/public
```

## Mermaid 圖表

用 ```mermaid 區塊就能畫流程圖、循序圖、甘特圖：

```mermaid
flowchart LR
  A[貼上 Markdown] --> B{自動存檔}
  B -->|打字停 400ms| C[寫入 localStorage]
  B -->|關閉分頁| C
  C --> D[下次開啟自動還原]
```

## 數學式

行內的 $E = mc^2$，或獨立成塊：

$$
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
$$

## 提示區塊

> [!NOTE]
> 這是一般提示，語法是 `> [!NOTE]`。

> [!WARNING]
> 支援 NOTE、TIP、IMPORTANT、WARNING、CAUTION 五種。

## 隱私

所有內容都只留在你的瀏覽器（`localStorage`），**不會上傳到任何伺服器**[^1]。
這個站是純靜態網頁，沒有後端、沒有資料庫、沒有帳號。

[^1]: 整份程式在 Cloudflare 的 CDN 上以靜態檔案形式提供，沒有任何接收內容的 API。

---

清空這段文字就可以開始寫你自己的東西了 :sparkles: