Markdown 前景色、背景色

1. 前言

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

Markdown 使普通文本具有格式，但它的原生語(yǔ)法并不支持修改前景色和背景色。為了實(shí)現(xiàn)豐富文本顏色的需求，我們需要通過(guò)增加 HTML 標(biāo)簽實(shí)現(xiàn)此類(lèi)效果。

環(huán)境說(shuō)明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁(yè)面復(fù)制粘貼到本地不會(huì)正常顯示，大家學(xué)習(xí)時(shí)自己動(dòng)手寫(xiě)是肯定沒(méi)問(wèn)題的。本節(jié)所有實(shí)例代碼及演示效果均使用 Typora 工具完成。
本節(jié)所有截圖均為 Typora 導(dǎo)出為 HTML 后渲染效果。

2. 語(yǔ)法詳解

2.1 前景色

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

實(shí)例 1：

#### 使用 `<font>` 的標(biāo)簽的修改文字前景色

<font color="red">紅色</font>
<font color="green">綠色</font>
<font color="blue">藍(lán)色</font>

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

<font color="#FF00BB">使用十六進(jìn)制顏色值</font>

渲染結(jié)果如下：

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

實(shí)例 2：

#### 使用 `style` 的標(biāo)簽的修改文字前景色

<font style="color: red">紅色</font>
<font style="color: green">綠色</font>
<font style="color: blue">藍(lán)色</font>

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

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

其渲染結(jié)果如下：

2.2 背景色

Markdown 文檔中定義文字背景色需要通過(guò)修改 style 樣式實(shí)現(xiàn)。

實(shí)例 3：

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

<font style="background: red">紅色</font>
<font style="background: green">綠色</font>
<font style="background: blue">藍(lán)色</font>

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

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

其渲染結(jié)果如下：

實(shí)例 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);">太陽(yáng)太陽(yáng)，給我們帶來(lái)，七色光彩</font>

漸變背景色

其渲染結(jié)果如下：

3. 使用場(chǎng)景及應(yīng)用實(shí)例

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

實(shí)例 5：

夜晚模式效果。

#### 夜讀模式

##### 《春》 朱自清

盼望著，盼望著，東風(fēng)來(lái)了，春天的腳步近了。

一切都像剛睡醒的樣子，欣欣然張開(kāi)了眼。山朗潤(rùn)起來(lái)了，水漲起來(lái)了，太陽(yáng)的臉紅起來(lái)了。

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

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

其渲染結(jié)果如下：

小結(jié)

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

對(duì)于顏色，請(qǐng)盡量使用柔和的顏色，防止刺傷眼睛。

如果我們對(duì)顏色的設(shè)計(jì)沒(méi)有很好的經(jīng)驗(yàn)，可以嘗試使用其他設(shè)計(jì)師們?cè)O(shè)計(jì)好的主題。比如如果用 Typora 的話，可以在 Typora 的菜單里切換或下載其他主題。