正在載入...
請稍候
封面
示例歌曲名稱
示例藝術家
0:00 / 0:00

播放列表

Markdown 顏色教學

未分類
2.6k 字

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>

效果:

紅色加粗文字
綠色斜體文字
帶背景的文字


小技巧與注意事項

  1. 不支援所有平台:Markdown 在不同的平台上可能顯示效果不同,特別是一些在線 Markdown 編輯器或 GitHub 等可能會不支持 HTML 標籤。

  2. 不支持顏色選項:純 Markdown 不提供顏色選項,所以你需要借助 HTML 標籤來實現顏色控制。