連結與媒體
本頁說明連結、自動網址、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://...")不轉換 |
圖片
| 寫法 | 輸出 |
|---|---|
 |
<img alt="替代文字" src="image.png"> |
 |
加上 title |
尺寸與對齊(擴充模式)
在圖片語法後緊接一組括號:
| 寫法 | 結果 |
|---|---|
(300x200) |
寬 300px、高 200px |
(50%x) |
只設寬度 |
(x200) |
只設高度 |
(300x200 left) |
再加 float: left;right 同理 |
(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 連結時,預覽在每次輸入後都會出現明顯卡頓。