# 連結與媒體

本頁說明連結、自動網址、Email、圖片尺寸與對齊、影片，以及 YouTube／Vimeo 嵌入。

## 連結

| 寫法 | 輸出 |
|---|---|
| `[文字](https://example.com)` | `<a href="..." target="_blank">文字</a>` |
| `[文字](https://example.com "標題")` | 加上 `title` 屬性（單或雙引號皆可） |
| `https://example.com` | 自動轉成連結，文字為網址本身 |
| `me@example.com`、`mailto:me@example.com` | `<a href="mailto:me@example.com">` |

| 規則 | 說明 |
|---|---|
| 開啟方式 | 所有連結一律 `target="_blank"`，無法設定 |
| 網址內不可有空白 | `[t](https://a.com b)` 不成立，只有其中的網址會被自動連結，其餘保留原文 |
| 文字與網址皆不可為空 | `[](url)`、`[文字]()` 保留原文 |
| 自動網址 | 只比對 `http://`、`https://` 開頭；被引號包住的網址（`"https://..."`）不轉換 |

## 圖片

| 寫法 | 輸出 |
|---|---|
| `![替代文字](image.png)` | `<img alt="替代文字" src="image.png">` |
| `![替代文字](image.png "標題")` | 加上 `title` |

### 尺寸與對齊（擴充模式）

在圖片語法後緊接一組括號：

| 寫法 | 結果 |
|---|---|
| `![a](x.png)(300x200)` | 寬 300px、高 200px |
| `![a](x.png)(50%x)` | 只設寬度 |
| `![a](x.png)(x200)` | 只設高度 |
| `![a](x.png)(300x200 left)` | 再加 `float: left`；`right` 同理 |
| `![a](x.png)(300)` | 不成立，`(300)` 以文字保留 |

寬高之間可用 `x`、`*` 或空白分隔；數字不帶單位時補上 `px`，帶 `%` 等單位時原樣使用。結果寫入 `<img>` 的 inline `style`。標準模式會吃掉這組括號但不套用。

## 影片

圖片語法的網址以 `.mp4` 或 `.mov` 結尾時，輸出 `<video controls>`，內含對應 `type`（`video/mp4`、`video/quicktime`）的 `<source>`。替代文字不會輸出，標題寫入 `title`。

## YouTube 與 Vimeo 嵌入（擴充模式）

連結或自動網址指向 YouTube 或 Vimeo 時，輸出一組預覽卡：

| 元素 | 內容 |
|---|---|
| `<a>` | 原始連結 |
| `<section class="more">` | 縮圖與播放圖示，點擊後隱藏自身並顯示 iframe |
| `<iframe loading="lazy">` | 寬 640px 的播放器，初始 `display: none` |

| 平台 | 支援網址 | 縮圖來源 |
|---|---|---|
| YouTube | `youtu.be/ID`、`youtube.com/watch?v=ID`、`/embed/ID`、`/v/ID`（ID 11 字元） | `i.ytimg.com/vi/ID/mqdefault.jpg` |
| Vimeo | `vimeo.com/ID`、`/channels/.../ID`、`/groups/.../videos/ID`、`/album/.../video/ID` | `vimeo.com/api/v2/video/ID.json` |

Vimeo 縮圖以**同步** XHR 取得：每次轉換都會阻塞主執行緒直到請求完成，請求失敗時縮圖為空。內容含大量 Vimeo 連結時，預覽在每次輸入後都會出現明顯卡頓。
