文件 1.11.6

連結與媒體

本頁說明連結、自動網址、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 連結時,預覽在每次輸入後都會出現明顯卡頓。

EN