Markdown 下劃線:4 種方法完整教程

Markdown 原生語法裡沒有下劃線。John Gruber 在 2004 年設計 Markdown 的時候就故意沒加這個功能,原因很簡單:網頁上帶下劃線的文字,幾乎都會讓人以為是超連結。

但實際需求是繞不開的——寫報告要標注重點,記筆記要高亮關鍵詞,有些論文格式甚至明確要求使用下劃線。我在 GitHub、GitLab、Typora、Obsidian、Jupyter Notebook 和 Discord 上反覆測試過各種下劃線方法,這篇文章把所有靠譜的方案都整理出來了,按需取用就好。

方法一:<u> 標籤(最常用)

這是最直接的方案。Markdown 支援內聯 HTML,所以直接用 HTML 的下劃線標籤就行:

<u>這段文字會顯示下劃線</u>

渲染效果:這段文字會顯示下劃線

用在句子裡

請注意,<u>截止日期是下週五</u>,逾期不予受理。

渲染效果:請注意,截止日期是下週五,逾期不予受理。

<u> 標籤的兼容性

平台是否支援備註
GitHub(README)部分支援普通文字有效,標題中不支援
GitLab支援
Typora支援
VS Code 預覽支援
Obsidian支援
Jupyter Notebook支援
Jekyll / Hugo支援
GitHub Issues/PR不支援需用 <ins> 替代

說實話,<u> 標籤在大部分場景下都夠用了。但在 GitHub 的 Issue 留言和 PR 描述裡,它會被過濾掉。這種情況下就得用下面提到的 <ins> 標籤。

順便提一句,<u> 標籤在 HTML4 時代曾被標記為「已廢棄」(deprecated),但 HTML5 規範中已經恢復使用。官方給它的語意定義是「帶有未表達的、但明確呈現的非文字註解的文字」。所以放心用,不會過時。

方法二:<ins> 標籤(GitHub 推薦方案)

<ins> 是 HTML 的「插入」標籤,語意上表示「新增的內容」,通常和 <del>(刪除標籤)搭配使用。大多數 Markdown 渲染器會把它顯示為下劃線效果:

<ins>這段文字也會顯示下劃線</ins>

渲染效果:這段文字也會顯示下劃線

什麼時候該用 <ins> 而不是 <u>

如果你主要在 GitHub 上寫文件(Issue、PR 描述、留言),推薦直接用 <ins>

### <ins>重要標題</ins>

這段程式碼在 GitHub 上可以正常渲染出帶下劃線的標題。換成 <u> 就不行——GitHub 的 Markdown 渲染器在標題和 Issue 留言中會過濾掉 <u> 標籤,但放過了 <ins>

有次我在寫一個 PR 描述時想給標題加下劃線,用了 <u> 怎麼都不生效,後來翻 Stack Overflow 才發現 GitHub 對這倆標籤的處理方式不一樣。從那以後,凡是在 GitHub 上用下劃線,我都預設用 <ins>

<u><ins> 的區別

標籤語意HTML5 狀態GitHub 標題GitHub 正文
<u>未表達的註解有效不支援部分支援
<ins>新增內容有效支援支援

從語意上講,如果你只是想給文字加下劃線做強調,用 <u> 更準確;如果是表示「新增/插入」的內容,用 <ins> 更合適。但在實際使用中,很多平台對 <ins> 的兼容性更好,尤其是 GitHub。

方法三:CSS text-decoration 樣式(最靈活)

如果你的 Markdown 渲染環境支援 CSS(比如自己搭建的部落格、Hugo/Jekyll 站點),可以用內聯樣式實現更精細的控制:

<span style="text-decoration: underline;">帶下劃線的文字</span>

渲染效果:帶下劃線的文字

這個方法的好處是可以搭配其他樣式:

<span style="text-decoration: underline wavy red;">紅色波浪下劃線</span>

渲染效果:紅色波浪下劃線

text-decoration 支援的樣式值還挺多:

效果
underline普通下劃線
underline wavy波浪線
underline dotted點狀線
underline dashed虛線
underline double雙線
underline red紅色下劃線
underline wavy red 2px紅色波浪線,2px 粗細

不過要注意,GitHub 會過濾掉所有內聯 CSS 樣式,所以這個方法在 GitHub 上完全無效。另外,Discord、Obsidian 的即時預覽等場景也不支援自訂 CSS。

方法四:Discord 專用語法 __下劃線__

如果你是在 Discord 裡用 Markdown,那恭喜你——Discord 有自己的下劃線專用語法,不需要 HTML 標籤:

__這段文字會顯示下劃線__

兩個底線包裹文字就行了,非常方便。Discord 還支援下劃線和其他格式的組合:

__*下劃線斜體*__
__**下劃線粗體**__
__***下劃線粗斜體***__

需要強調的是,這是 Discord 自己擴展的語法,不是標準 Markdown。在其他平台上 __文字__ 通常會被渲染成粗體,而不是下劃線。

各平台下劃線方法速查表

把上面的資訊彙總一下,方便快速查閱:

方法語法GitHubTyporaObsidianJupyterDiscord自建部落格
<u> 標籤<u>文字</u>部分支援支援支援不適用支援
<ins> 標籤<ins>文字</ins>支援支援支援支援不適用支援
CSS 樣式<span style="text-decoration:underline">不支援支援部分支援支援不適用支援
Discord 語法__文字__粗體粗體粗體粗體下劃線粗體

兩個小技巧

用 LaTeX 實現下劃線

如果平台支援 LaTeX 數學公式渲染(比如 Jupyter Notebook、Obsidian),還可以用 LaTeX 指令:

$\underline{帶下劃線的文字}$

這種方式適合需要精確排版控制的學術場景,但日常用起來比較麻煩,而且只在支援 LaTeX 的環境裡有效。

VS Code 外掛輔助

如果你經常在 VS Code 裡寫 Markdown,可以安裝 Markdown Underline 外掛。它會自動把 ++文字++ 轉換為下劃線效果,用起來比手寫 HTML 標籤方便一些。不過要注意,這依賴 markdown-it 解析器的 underline 外掛,不是所有渲染器都能識別 ++ 語法。

常見問題

Markdown 為什麼沒有原生的下劃線語法?

因為網頁上超連結預設就是下劃線樣式,如果再加一個下劃線語法,讀者很容易分不清哪些是連結、哪些是普通強調。這也是為什麼很多 Markdown 教學會建議用粗體斜體來替代下劃線做文字強調。

<u><ins> 到底該用哪個?

簡單說:在 GitHub 上用 <ins>,其他平台用 <u>。如果嫌麻煩,全部用 <ins> 也行,反正效果一樣。

能給標題加下劃線嗎?

可以,在標題中嵌入 HTML 標籤即可:

## <ins>帶下劃線的標題</ins>

在 GitHub 上記得用 <ins> 而不是 <u>

下劃線和刪除線能一起用嗎?

可以,巢狀使用即可:

<u>~~這段文字同時有下劃線和刪除線~~</u>

渲染效果:這段文字同時有下劃線和刪除線

參考來源

總結

Markdown 下劃線本身沒有原生語法,但透過 HTML 標籤可以輕鬆實現。大多數情況下 <u>文字</u> 就夠了,在 GitHub 上用 <ins>文字</ins> 更穩妥,需要精細控制時可以用 CSS 的 text-decoration 樣式。語法沒幾行,但不同平台的兼容性差異確實值得注意——選對方法,少走彎路。