Markdown 中如何顯示顏色
在 Markdown 中使用顏色,最簡單的方式就是在文本中插入 HTML 來改變顏色。
基本顏色設置
1 2 3 4 5
| <span style="color: red;">這是紅色文字</span> <span style="color: green;">這是綠色文字</span> <span style="color: blue;">這是藍色文字</span> <span style="color: orange;">這是橙色文字</span> <span style="color: purple;">這是紫色文字</span>
|
效果:
這是紅色文字
這是綠色文字
這是藍色文字
這是橙色文字
這是紫色文字
自定義顏色
可以使用十六進制(Hex)、RGB 或 RGBA 色碼來指定顏色。
十六進制顏色
1 2 3 4
| <span style="color: #FFB6C1;">這是淡粉紅色</span> <span style="color: #98FB98;">這是淡綠色</span> <span style="color: #ADD8E6;">這是淺藍色</span> <span style="color: #DDA0DD;">這是淡紫色</span>
|
效果:
這是淡粉紅色
這是淡綠色
這是淺藍色
這是淡紫色
RGB 顏色
1 2 3 4
| <span style="color: rgb(255, 182, 193);">這是淡粉色 (RGB)</span> <span style="color: rgb(152, 251, 152);">這是淡綠色 (RGB)</span> <span style="color: rgb(173, 216, 230);">這是淺藍色 (RGB)</span> <span style="color: rgb(221, 160, 221);">這是淡紫色 (RGB)</span>
|
效果:
這是淡粉色 (RGB)
這是淡綠色 (RGB)
這是淺藍色 (RGB)
這是淡紫色 (RGB)
RGBA 顏色 (加上透明度)
RGBA 允許在顏色中添加透明度(alpha)。
1 2
| <span style="color: rgba(255, 182, 193, 0.5);">這是帶透明度的淡粉色 (RGBA)</span> <span style="color: rgba(152, 251, 152, 0.7);">這是帶透明度的淡綠色 (RGBA)</span>
|
效果:
這是帶透明度的淡粉色 (RGBA)
這是帶透明度的淡綠色 (RGBA)
漸層顏色
可以使用 漸層背景 或漸層顏色來讓文字看起來更有層次感。
文字漸層
1
| <span style="background: linear-gradient(to right, #FFB6C1, #FFDAB9, #FFFFE0, #98FB98, #ADD8E6, #DDA0DD, #F0E68C); -webkit-background-clip: text; color: transparent;">這是一段七彩漸層文字</span>
|
效果:
這是一段七彩漸層文字
背景顏色
除了文本顏色外,也可以給段落或區塊設置背景顏色。
1 2 3 4 5 6
| <div style="background-color: #FFB6C1; padding: 10px;"><span style="color: black;">這是一個粉紅色背景的段落。</span></div>
<div style="background-color: #ADD8E6; padding: 10px;"><span style="color: black;">這是一個淺藍色背景的段落。</span></div>
<div style="background: linear-gradient(to right, #FFB6C1, #FFDAB9, #FFFFE0, #98FB98, #ADD8E6, #DDA0DD, #F0E68C); padding: 10px;"> <span style="color: black;">這是一個七彩漸層背景的段落。</span></div>
|
效果:
這是一個粉紅色背景的段落。
這是一個淺藍色背景的段落。
這是一個七彩漸層背景的段落。
如何使用顏色進行強調
在 Markdown 中,可以用顏色來強調某些部分,例如加粗文字或背景顏色。這樣可以讓文本在文檔中更醒目。
1 2 3
| **<span style="color: red;">紅色加粗文字</span>** *<span style="color: green;">綠色斜體文字</span>* <span style="background-color: yellow; padding: 5px;">帶背景的文字</span>
|
效果:
紅色加粗文字
綠色斜體文字
帶背景的文字
小技巧與注意事項
不支援所有平台:Markdown 在不同的平台上可能顯示效果不同,特別是一些在線 Markdown 編輯器或 GitHub 等可能會不支持 HTML 標籤。
不支持顏色選項:純 Markdown 不提供顏色選項,所以你需要借助 HTML 標籤來實現顏色控制。