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 就夠了

說實話語法本身沒幾行，但坑都在不同平台的相容性上。寫之前先確認你的目標平台支援哪種方法，能省不少事。

參考來源