Markdown 文本颜色与字体颜色

Markdown 是一种简洁的写作格式，但它有个明显的短板——原生不支持文本颜色。这是有意为之的：Markdown 的设计者 John Gruber 在原始语法文档中明确说过，Markdown 的格式语法只处理"纯文本就能传达的内容"，而颜色显然需要视觉渲染才能体现。

不过别担心，虽然 Markdown 语法本身没有颜色指令，我们仍然可以通过几种变通方法来实现。本文会按场景逐一讲解，告诉你哪种方法在哪个平台能用，顺带把踩过的坑也一并分享。

用 HTML 标签添加文本颜色

这是最通用的方法。原理很简单：Markdown 允许嵌入 HTML（了解更多可以看这篇 Markdown 中使用 HTML 的介绍），而 HTML 天然支持颜色。

使用 <span style> 设置颜色

<span> 标签配合 CSS 的 color 属性，是最标准的做法：

<span style="color:red">这是红色文字</span>
<span style="color:#0000FF">这是蓝色文字</span>
<span style="color:rgb(0,128,0)">这是绿色文字</span>

color 属性接受三种格式的值：

格式示例说明
颜色名称red、blue、green最直观，支持 140 种命名颜色
十六进制#FF0000、#00FF00最常用，精确控制颜色
RGBrgb(255,0,0)适合需要透明度时使用

你还可以在同一个标签里同时设置字体大小：

<span style="color:red; font-size:20px">红色大号文字</span>

使用 <font> 标签设置颜色

<font> 标签更简洁，写起来也更短：

<font color="red">红色文字</font>
<font color="#00BFFF">深天蓝色文字</font>
<font color="blue" size="5">蓝色大号文字</font>

说实话，<font> 标签在 HTML5 中已经被标记为废弃（deprecated），但绝大多数 Markdown 渲染器依然支持它，因为它太常用了。如果你追求规范性，建议优先使用 <span style> 方式。

设置背景颜色

如果你需要的不是文字变色而是背景色，可以用 <table> 的 bgcolor 属性——这个方法在很多平台都能用：

<table><tr><td bgcolor="orange">橙色背景的文字</td></tr></table>
<table><tr><td bgcolor="#ADD8E6">浅蓝色背景的文字</td></tr></table>

HTML 方法的平台支持情况

这里我整理了一个实际测试的结果：

平台<span style><font><table bgcolor>
CSDN✅✅✅
博客园⚠️ 部分支持✅✅
Typora✅✅✅
VS Code 预览✅✅✅
HackMD✅✅✅
Jupyter Notebook✅✅✅
GitHub README❌❌❌
GitLab❌❌⚠️ 部分

数据来源：Stack Overflow 高赞回答 [1]、GitHub Community 讨论 [2]、GitLab Forum [3]，以及笔者实测。

对了，GitHub 和 GitLab 出于安全考虑，会过滤掉 HTML 中的 style 属性和大部分标签，所以上面这些 HTML 方法在这两个平台上基本不生效。如果你需要在 GitHub 上给文字加颜色，需要用下面介绍的 LaTeX 方法。

在 GitHub 上使用 LaTeX 添加颜色

从 2022 年 5 月开始，GitHub 正式支持 LaTeX 数学公式渲染，我们可以借用 LaTeX 的 \color 命令来实现文本颜色（想深入了解 LaTeX 语法可以看 Markdown LaTeX 教程）：

$\color{red}红色文字$
$\color{blue}蓝色文字$
$\color{green}绿色文字$

行内公式用单 $，独立公式块用双 $$：

$$\color{red}这是一段红色文字$$

多色文字

如果想在一行里混合多种颜色：

$\color{red}红色 \color{blue}蓝色 \color{green}绿色$

用 \textcolor 精确控制范围

\color 会影响后面所有文字，用 \textcolor 可以精确指定哪些文字变色：

$\textcolor{red}{只有这段是红色} 其他文字正常$

用 \textsf 恢复正常字体

LaTeX 默认会以数学斜体渲染文字，看起来不太自然。加上 \textsf 可以恢复为正常字体：

$\textsf{\textcolor{red}{正常字体的红色文字}}$

LaTeX 颜色方法的局限性

这个方法虽然巧妙，但有几个需要注意的地方：

  1. 文字渲染为图片——不可选中、不可复制，对 SEO 不友好
  2. 移动端 GitHub App 不支持——只有浏览器版能看到
  3. 空格需要用 ~ 或 \space 代替——直接打空格可能被忽略
  4. 不能用于代码块内部——LaTeX 在代码块中不起作用
  5. 2025 年 5 月曾短暂失效——GitHub 后端更新导致，后来已恢复

我之前在做一个项目的 README 时，想用 LaTeX 颜色标注状态信息，结果发现在手机上完全看不到颜色效果，后来还是改用了 emoji 方案。

用 Diff 代码块暗示颜色（GitHub 限定）

虽然不算真正的文字颜色，但 GitHub 的 diff 语法高亮可以间接实现红绿效果：

```diff
- 这行显示为红色（删除样式）
+ 这行显示为绿色（添加样式）
! 这行显示为橙色

这个方法只适用于代码块（想了解更多代码块语法可以看 [Markdown 代码块教程](/markdown/code-block/)），不能用于正文文字，但它是在 GitHub 上标注状态的实用技巧。

## 用 Emoji 替代颜色效果

如果你只是想用颜色来表达状态或吸引注意力，emoji 可能是最简单直接的方案：

```markdown
✅ **已完成** — 功能开发完毕
❌ **未通过** — 测试失败
🔴 紧急 | 🟡 注意 | 🟢 正常
⚠️ **警告**：请勿操作

emoji 在几乎所有 Markdown 平台上都能正常显示，而且语义清晰。虽然不是给文字本身上色，但在很多场景下够用了。

常用颜色代码参考

这里整理了一些常用的颜色代码，方便直接复制使用：

基础颜色

颜色名称十六进制效果
红色red#FF0000<font color="red">示例</font>
蓝色blue#0000FF<font color="blue">示例</font>
绿色green#008000<font color="green">示例</font>
橙色orange#FFA500<font color="orange">示例</font>
紫色purple#800080<font color="purple">示例</font>
黄色yellow#FFFF00<font color="yellow">示例</font>
粉色pinkFFC0CB<font color="pink">示例</font>
青色cyan#00FFFF<font color="cyan">示例</font>

实用颜色

颜色名称十六进制效果
深红darkred#8B0000<font color="darkred">示例</font>
珊瑚色coral#FF7F50<font color="coral">示例</font>
番茄红tomato#FF6347<font color="tomato">示例</font>
金色gold#FFD700<font color="gold">示例</font>
深蓝darkblue#00008B<font color="darkblue">示例</font>
天蓝deepskyblue#00BFFF<font color="deepskyblue">示例</font>
深绿darkgreen#006400<font color="darkgreen">示例</font>
灰色gray#808080<font color="gray">示例</font>

在 Jupyter Notebook 中使用颜色

Jupyter 的 Markdown 单元格支持 HTML，所以前面提到的 <span> 和 <font> 方法都能直接用：

<span style="color:red; font-size:16px">这是 Jupyter 中的红色文字</span>

顺便提一句，如果你在 Jupyter 中需要显示带颜色的标题，可以在 Markdown 单元格里这样写：

### <span style="color:blue">蓝色标题</span>

在 R Markdown 和 Pandoc 中使用颜色

如果你使用 R Markdown 或 Pandoc 生成多格式文档（HTML + PDF），处理颜色的方式会有所不同：

HTML 输出

直接使用 <span style> 即可，和普通 Markdown 一样。

PDF 输出（通过 LaTeX）

需要在 YAML 头部引入 xcolor 宏包：

---
header-includes:
  - \usepackage{xcolor}
---

然后在文档中使用 LaTeX 命令：

\textcolor{red}{红色文字}
\textcolor{blue}{蓝色文字}

也可以自定义颜色：

\definecolor{myblue}{rgb}{0.2, 0.4, 0.8}
\textcolor{myblue}{自定义蓝色}

同时兼容 HTML 和 PDF

R Markdown Cookbook 提供了一个思路：写一个辅助函数，根据输出格式自动选择 HTML 或 LaTeX 语法 [4]。这样同一份源码就能同时输出两种格式。

快速选择指南

根据你的使用场景，选对方法很重要：

  • 写博客（CSDN、博客园） → 用 <font> 或 <span style>，简单直接
  • GitHub README → 用 LaTeX $\color{red}{文字}$ 或 emoji
  • GitLab → 同 GitHub，用 LaTeX 方法
  • Jupyter Notebook → 用 <span style>
  • Typora / VS Code → <span style> 和 <font> 都行
  • R Markdown 生成 PDF → 用 LaTeX \textcolor
  • 只想标注状态 → emoji 就够了

说实话语法本身没几行，但坑都在不同平台的兼容性上。写之前先确认你的目标平台支持哪种方法，能省不少事。

参考来源