Markdown 前景色、背景色

1. 前言

顏色可以使普通文字表達出更深刻的含義，比如紅色用于醒目與警示、綠色用于表達良好與正常等。

Markdown 使普通文本具有格式，但它的原生語法并不支持修改前景色和背景色。為了實現豐富文本顏色的需求，我們需要通過增加 HTML 標簽實現此類效果。

環境說明：
考慮到 Markdown 工具之間的不兼容，有的內容直接從頁面復制粘貼到本地不會正常顯示，大家學習時自己動手寫是肯定沒問題的。本節所有實例代碼及演示效果均使用 Typora 工具完成。
本節所有截圖均為 Typora 導出為 HTML 后渲染效果。

2. 語法詳解

2.1 前景色

在 Markdown 文件中，建議使用 <font> 標簽的 color 屬性修改文字顏色。

實例 1：

#### 使用 `<font>` 的標簽的修改文字前景色

<font color="red">紅色</font>
<font color="green">綠色</font>
<font color="blue">藍色</font>

<font color="rgb(200, 100, 100)">使用 rgb 顏色值</font>

<font color="#FF00BB">使用十六進制顏色值</font>

渲染結果如下：

除了修改 color 屬性外，還可以使用 style 樣式屬性修改文字顏色。

實例 2：

#### 使用 `style` 的標簽的修改文字前景色

<font style="color: red">紅色</font>
<font style="color: green">綠色</font>
<font style="color: blue">藍色</font>

<font style="color: rgb(200,100,100)">使用 rgb 顏色值</font>

<font style="color: #FF00BB">使用十六進制顏色值</font>

其渲染結果如下：

2.2 背景色

Markdown 文檔中定義文字背景色需要通過修改 style 樣式實現。

實例 3：

#### 使用 `style` 屬性修改文字的背景色

<font style="background: red">紅色</font>
<font style="background: green">綠色</font>
<font style="background: blue">藍色</font>

<font style="background: rgb(200,100,100)">使用 rgb 顏色值</font>

<font style="background: #FF00BB">使用十六進制顏色值</font>

其渲染結果如下：

實例 4：

利用 style 的豐富樣式，我們可以定義出豐富的文字形式。

#### 更豐富背景樣式


## <font style="background: url('http://www.wenliku.com/d/file/patterns/2019-06-26/d8fac26c38c9b2a7e2393fc9af766e8f.jpg') ">I wish you a Merry Christmas</font>

使用圖片作背景


## <font style="background: linear-gradient( to right, #ff1616, #ff7716, #ffdc16, #36c945, #10a5ce, #0f0096, #a51eff, #ff1616);">太陽太陽，給我們帶來，七色光彩</font>

漸變背景色

其渲染結果如下：

3. 使用場景及應用實例

利用前景色和背景色、以及字體字號等樣式，我們可以定義出豐富的渲染主題，以適應不同的設備或閱讀需求，比如閱讀類 APP 中常見的夜晚模式、筆記類 APP 的更換紙張的效果等。

實例 5：

夜晚模式效果。

#### 夜讀模式

##### 《春》 朱自清

盼望著，盼望著，東風來了，春天的腳步近了。

一切都像剛睡醒的樣子，欣欣然張開了眼。山朗潤起來了，水漲起來了，太陽的臉紅起來了。

小草偷偷地從土里鉆出來，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿是的。坐著，躺著，打兩個滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。風輕悄悄的，草軟綿綿的。

<style>
body { background-color: #000 !important; }
h1,h2,h3,h4,h5,h6,h7,p { color: #999 !important; }
</style>

其渲染結果如下：

小結

1. 同一顏色值在不同顯示器上會有色差，選取顏色時盡量使用安全色。
2. 為了確保整篇文章的整體風格一致，通常只需要配置全局的前景色和背景色即可。

對于顏色，請盡量使用柔和的顏色，防止刺傷眼睛。

如果我們對顏色的設計沒有很好的經驗，可以嘗試使用其他設計師們設計好的主題。比如如果用 Typora 的話，可以在 Typora 的菜單里切換或下載其他主題。