這次不介紹外掛，而是介紹CSS片段給 ==高顏控== 指數的網友們。
我們使用的是deathau製作的CSS片段。
可使用的顏色代碼如下：
- gray 灰色
- brown 褐色
- orange 橘色
- yellow 黃色
- green 綠色
- blue 藍色
- purple 紫色
- pink 粉紅色
- red 紅色
除了deathau的CSS片段，先前介紹過的8+8 highlight colors是另一個選擇：
– [Obs＃39] 利用CSS變更文字顏色，侵入性小
安裝與啟用
1. 下載CSS檔
至下列網址下載.css檔，再存入你的<span class=’purple-bg’>儲存庫根目錄/.obsidian/snippets</span>
- https://github.com/deathau/obsidian-snippets/blob/main/notation-colour-blocks.css
- https://github.com/deathau/obsidian-snippets/blob/main/realistic-highlight.css
2. 啟用CSS片段
設定→外觀→找到CSS片段，啟用要使用的notation-colour-blocks與realistic-highlight。
由於顏色類別名有許多外掛會自行定義，因此會有衝突（例如yellow，Buttons外掛也有用到），為了避免同名衝突，建議修改notation-colour-blocks.css，將顏色名再加上不會重覆的開頭，例如yellow改成note-yellow。
1. 區域文字前景顏色
<ol><li>這段文字變成<span class='note-gray'>gray 灰色</span>，檢視看看😄
<li>這段文字變成<span class='note-brown'>brown 褐色</span>，檢視看看😄
<li>這段文字變成<span class='note-orange'>orange 橘色</span>，檢視看看😄
<li>這段文字變成<span class='note-yellow'>yellow 黃色</span>，檢視看看😄
<li>這段文字變成<span class='note-green'>green 綠色</span>，檢視看看😄
<li>這段文字變成<span class='note-blue'>blue 藍色</span>，檢視看看😄
<li>這段文字變成<span class='note-purple'>purple 紫色</span>，檢視看看😄
<li>這段文字變成<span class='note-pink'>pink 粉紅色</span>，檢視看看😄
<li>這段文字變成<span class='note-red'>red 紅色</span>，檢視看看😄
</ol>
2. 區域文字背景顏色
<ol><li>這段文字變成<span class='gray-bg'>gray 灰色</span>，檢視看看👼
<li>這段文字變成<span class='brown-bg'>brown 褐色</span>，檢視看看👼
<li>這段文字變成<span class='orange-bg'>orange 橘色</span>，檢視看看👼
<li>這段文字變成<span class='yellow-bg'>yellow 黃色</span>，檢視看看👼
<li>這段文字變成<span class='green-bg'>green 綠色</span>，檢視看看👼
<li>這段文字變成<span class='blue-bg'>blue 藍色</span>，檢視看看👼
<li>這段文字變成<span class='purple-bg'>purple 紫色</span>，檢視看看👼
<li>這段文字變成<span class='pink-bg'>pink 粉紅色</span>，檢視看看👼
<li>這段文字變成<span class='red-bg'>red 紅色</span>，檢視看看👼
</ol>
3. 程式碼區塊背景顏色
```note-gray-bg gray 灰色 gray 灰色 gray 灰色 ``` ```note-brown-bg brown 褐色 brown 褐色 brown 褐色 ``` ```note-orange-bg orange 橘色 orange 橘色 orange 橘色 ``` ```note-yellow-bg yellow 黃色 yellow 黃色 yellow 黃色 ``` ```note-green-bg green 綠色 green 綠色 green 綠色 ``` ```note-blue-bg blue 藍色 blue 藍色 blue 藍色 ``` ```note-purple-bg purple 紫色 purple 紫色 purple 紫色 ``` ```note-pink-bg pink 粉紅色 pink 粉紅色 pink 粉紅色 ``` ```note-red-bg red 紅色 red 紅色 red 紅色 ```
4. 程式碼區塊前景顏色
```note-gray gray 灰色 gray 灰色 gray 灰色 ``` ```note-brown brown 褐色 brown 褐色 brown 褐色 ``` ```note-orange orange 橘色 orange 橘色 orange 橘色 ``` ```note-yellow yellow 黃色 yellow 黃色 yellow 黃色 ``` ```note-green green 綠色 green 綠色 green 綠色 ``` ```note-blue blue 藍色 blue 藍色 blue 藍色 ``` ```note-purple purple 紫色 purple 紫色 purple 紫色 ``` ```note-pink pink 粉紅色 pink 粉紅色 pink 粉紅色 ``` ```note-red red 紅色 red 紅色 red 紅色 ```
5. 重點高亮
這是 <mark class='gray'>重點</mark> 要特別注意。
這是 <mark class='brown'>重點</mark> 要特別注意。
這是 <mark class='orange'>重點</mark> 要特別注意。
這是 <mark class='yellow'>重點</mark> 要特別注意。
這是 <mark class='green'>重點</mark> 要特別注意。
這是 <mark class='blue'>重點</mark> 要特別注意。
這是 <mark class='purple'>重點</mark> 要特別注意。
這是 <mark class='pink'>重點</mark> 要特別注意。
這是 <mark class='red'>重點</mark> 要特別注意。
6. 相關連結
7. 教學影片
＃＃您可能也會有興趣的類似文章
- [Obs＃39] 利用CSS變更文字顏色，侵入性小 (0則留言, 2021/05/10)
- [Obs＃25] 美化筆記的兩個外掛：Emoji Toolbar與Icons與自訂CSS樣式 (0則留言, 2021/01/30)
- Obsidian(黑曜石) 高亮度顯示或變更文字顏色的3種方法 (4則留言, 2020/07/01)
- [Obs＃35] Buttons外掛開啟筆記自動化操作契機
![⁉]()
(0則留言, 2021/04/23) - [Obs＃27] Timelines：時間軸外掛 (0則留言, 2021/03/12)
- [Obs#7] Obsidian(黑曜石) 多重游標的操作與兩個CSS樣式 (0則留言, 2020/07/13)
- [Obs＃43] 美化內部連結外觀：使用Supercharged Links外掛，並增加連結的功能選項 (0則留言, 2021/06/04)
- [Obs＃45] 軟體工程師必備的6個Obsidian外掛 (0則留言, 2021/08/13)
- Obsidian(黑曜石) 水平捲動面板的設定方法 (11則留言, 2020/06/27)
- [Obs＃42] Buttons外掛 0.4.5 新功能 (0則留言, 2021/05/19)
- [Obs＃31] 美化提示方塊的外掛：Admonitions和方便選用的AutoHotkey腳本 (0則留言, 2021/04/05)
- [Obs#15] 在筆記裡複製、使用obsidian網址與工作空間的使用 (0則留言, 2020/10/27)
- [Obs＃49] 快速準確的擷取網頁生成Markdown備忘：Obsidian Clipper瀏覽器擴充 (0則留言, 2021/09/05)
- 超強筆記軟體Obsidian (黑曜石)介紹與Zettelkasten筆記系統簡述 (0則留言, 2020/06/21)
- [Obs＃22] 讓有效學習更簡單！Markdown匯出到Anki | 使用Flashcards外掛 (0則留言, 2020/12/12)
