Markdown 下划线、文字颜色与居中的写法

Markdown 写作约 7 分钟

Markdown 本身没有下划线、文字颜色、居中、字号、上标、下标和高亮的语法,要用就借 HTML,下划线写 <u> 或 <ins>,上下标写 <sup> 和 <sub>,高亮写 <mark>,颜色写 <span style="color:red">,居中写 <p align="center">。麻烦在于笔记最后显示的地方未必认所有标签,比如 GitHub 会保留 <sup>、<sub> 和 <ins>,却会丢掉 style 属性;妙言的预览会放行原始 HTML,但不认 ==高亮== 和 ^上标^。所以写之前先想清楚这篇笔记最终在哪里读,再挑能活下来的那种写法。

为什么 Markdown 不提供这些

John Gruber 最初的 Markdown 文档里说得很明白,它的语法只覆盖纯文本里就能表达的东西,Markdown 是写作格式,HTML 是发布格式,Markdown 没覆盖的标记直接写 HTML 就行。加粗和斜体在纯文本邮件里本来就是强调的写法,所以有语法;颜色、字号和对齐属于排版,一篇满是排版标记的笔记,源码就不好读了。

下划线还有个额外的问题,网页上带下划线的文字通常就是链接。MDN 对 <u> 的说明里提醒过,不要让它默认的下划线和超链接混淆,而且这个元素的本意是标注非文本层面的记号,比如标出拼写错误,并不是通用的强调。想突出一个词,加粗或斜体多半更合适,下划线留给真的需要的场合。

HTML 替代写法

想要的效果 写法 备注
下划线 <u>文字</u> 或 <ins>文字</ins> GitHub 文档里把 <ins> 列为下划线
上标 x<sup>2</sup> 几乎处处可用
下标 H<sub>2</sub>O 几乎处处可用
高亮 <mark>文字</mark> 语义是标记出的重点
颜色 <span style="color:red">文字</span> 渲染器要保留 style
居中 <p align="center">文字</p> align 很老,但接受度高
小一点的字 <small>文字</small> 不是精确字号

行内标签写在段落里就行,不需要空行;<p>、<div> 这类块级标签会开启一个 HTML 块,到下一个空行才结束,这一点在下一节会用到。

居中与空行规则

<p align="center">一行居中的文字。</p>

<div align="center">

因为前后有空行,这里面的 **加粗** 仍然会被解析。

</div>

按 CommonMark 的规则,以 <div 或 <p 开头的行会开启 HTML 块,直到第一个空行之前的内容都会原样当作 HTML 输出,不再做 Markdown 解析,所以 <div align="center"> 紧接着写 **加粗**,星号会原样显示。在开标签后面和闭标签前面各留一个空行,中间的内容就又会被当成 Markdown 解析了。折叠区块那篇里的 <details> 也是同一条规则。

在妙言的预览里,<p align="center"> 和 <div align="center"> 里的段落会居中,left 和 right 同理,预览样式表默认把段落设成左对齐,并给这三个 align 值单独写了规则。<center> 和 <font> 是很老的标签,GitHub 会把它们去掉只留文字,居中还是用 align 更稳。

妙言能渲染什么

妙言的预览用 cmark-gfm 把 Markdown 转成 HTML,并让它保留原始 HTML(CMARK_OPT_UNSAFE 这个选项),所以 <u>、<mark>、<sup>、<sub> 和 <span style="..."> 都会原样交给预览的 web view,由浏览器引擎绘制。解析器打开了四个扩展,分别是表格、脚注、删除线和任务列表,没有一个提供下划线、高亮、上标或下标。

这带来两个结果。==高亮== 和 ^上标^ 会按字面显示;其他编辑器里常见的单波浪线下标 H~2~O 也不会变成下标,删除线扩展除了两个波浪线,也接受前后各一个波浪线,于是 ~2~ 会被读成删除线。V4.5.0 放在 Examples 文件夹里的语法指南写了 H~2~O 和 26^th^(中文版写的是 16^世纪^),但预览并不会把它们渲染成下标和上标,语法速查里也建议改用 <sub> 和 <sup>。

预览不会过滤 HTML,所以它适合试写法,不适合用来判断别人看到的样子,只因为软件放行才生效的标签,换到更严格的地方发布就会失效。

GitHub 保留什么、去掉什么

GitHub 在基础格式文档里列了三个,<sub>、<sup> 和 <ins>,最后一个用来做下划线。它的 markup 项目还说明,渲染出的 HTML 会经过过滤,行内样式会被去掉。拿一段示例交给 GitHub 的 Markdown API 渲染,结果是这样:

  • <ins>、<sup>、<sub> 和 <mark> 会保留。
  • <u> 和 <small> 的标签被去掉,文字还在,下划线和小字号没了。
  • <span style="color:red"> 文字还在,颜色没了。
  • align="center" 会保留,所以 README 里居中的 logo 才能正常显示。
  • H~2~O 在那里同样变成删除线,GitHub 也把单个波浪线当作删除线。

GitHub 自己提供的颜色功能只有一个,在 issue、PR 和讨论里,把 HEX、RGB 或 HSL 写进反引号,比如 #0969DA,旁边会出现一个小色块。它是在标示一个颜色,并不会给文字上色。作为对比,Typora 的参考页直接说可以用 <span style="color:red"> 上色、用 <u> 加下划线。

其他编辑器里的简写

有些编辑器自己定义了短语法,只有渲染器打开了才有效:

效果 写法 哪里支持
高亮 ==文字== Pandoc 的 mark 扩展,Typora(在偏好设置里开启)
上标 x^2^ Pandoc,Typora(在偏好设置里开启)
下标 H~2~O Pandoc,Typora(在偏好设置里开启)
下划线 [文字]{.underline} Pandoc,需要 bracketed spans 扩展

Pandoc 手册还补了一条,^...^ 或 ~...~ 里如果有空格,要用反斜杠转义,比如 P~a\ cat~。这些写法敲起来整齐,但对不认识它们的工具来说完全没法读,要在多个软件之间搬笔记的话,HTML 写法更稳。

用公式写上下标

笔记里本来就有公式的话,$x^2$ 和 $x_i$ 不用任何 HTML 就能得到上标和下标,妙言用内置的 KaTeX 渲染。KaTeX 还支持 \mathrm{} 写正体、\textcolor{blue}{...} 上色,所以 $\textcolor{blue}{F=ma}$ 能给公式着色。公式场景用它合适,写普通文字就别扭了,因为数学模式用的是数学字体和间距。分隔符和常见的坑见 Markdown 里写 LaTeX 公式。

让笔记保持可移植

  • 优先用语义化的 HTML(<mark>、<sup>、<ins>),少用 style 属性,因为保留前者的渲染器更多。
  • 如果浅色和深色主题都会用,避免写死颜色,为白底调好的深红色放到深色背景上可能就看不见了。
  • 只是想强调,用加粗或斜体,颜色留给真正需要的少数场合。
  • 在最严格的显示环境里测一下,比如 GitHub 的预览,再决定能不能依赖某个标签。
  • 不想被解析的字符要转义,见转义字符。

常见问题

Markdown 有下划线语法吗?

没有,CommonMark 和 GFM 都没定义。用 <u> 或 <ins>,用 Pandoc 转换时也可以写 [文字]{.underline}。

为什么我的红色文字在 GitHub 上是黑的?

GitHub 的过滤器会移除 style 属性,span 还在,颜色没了。改用加粗或引用块,或者把笔记发布到保留行内样式的地方。

在妙言里能写真正的 H₂O 下标吗?

可以,写 H<sub>2</sub>O,已经在公式里的话写 $\mathrm{H_2O}$。H~2~O 在妙言里会被读成删除线。