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。在其他平台上 __文字__ 通常会被渲染成粗体,而不是下划线。
各平台下划线方法速查表
把上面的信息汇总一下,方便快速查阅:
| 方法 | 语法 | GitHub | Typora | Obsidian | Jupyter | Discord | 自建博客 |
|---|---|---|---|---|---|---|---|
<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 样式。语法没几行,但不同平台的兼容性差异确实值得注意——选对方法,少走弯路。