點我

回到 HackMD 教學首頁

點我

給予建議 或回報BUG

如何自訂文字顏色?

使用 HTML 的 font 元素

你可以透過 HTML 的 font 元素，將一段文字放在 font 元素中，並指定文字顏色

1. 使用 <font color="#f00"> 和 </font> 前後包住想要變色的文字
2. # 符號的後面請輸入指定的顏色代碼，例如：
   • 灰色 #96999A
   • 紫色 #AC19C9
   • 藍色 #1936C9
   • 紅色 #f00
   • 橘色 #F7A004

範例

<font color="#96999A">灰色</font>
<font color="#AC19C9">紫色</font>
<font color="#1936C9">藍色</font>

H<font color="#f00">e</font>llo, World
歡迎來到<font color="#F7A004">橘色</font>的世界！

實際顯示如下

灰色
紫色
藍色

Hello, World
歡迎來到橘色的世界！

找不到喜歡顏色的色碼？

可以透過 Color-Picker 選擇想要的顏色，並將色碼貼入 # 符號的後面即可。

使用 CSS 的 class 功能

另一個方式，你可以透過在文件內定義 CSS 的作法，定義您想要的文字樣式，並將該樣式套用到文字中

1. 以藍色為例。在筆記中輸入下面文字，其中blue可以替換其他顏色。

<style>
.blue {color: blue;}
</style>

2. 在筆記當中想要自訂顏色時，使用 <span class="blue"> 和 </span> 前後包住文字。

範例

<style>
.blue {color: blue;}
</style>

<style>
.orange {color: orange;}
</style>

<span class="blue">藍色</span>
歡迎來到<span class="orange">橘色</span>的世界！

實際顯示如下

藍色
歡迎來到橘色的世界！

 

---

相關功能

• HackMD 換行顯示規則
• 強調重點：螢光筆、色塊強調和收合功能
• 快速打出 Emoji
• 更換文字顏色