Markdown 下划线、文字颜色与居中的写法
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 在妙言里会被读成删除线。
