這次不介紹外掛，而是介紹CSS片段給 ==高顏控== 指數的網友們。
我們使用的是deathau製作的CSS片段。

可使用的顏色代碼如下：

  • gray 灰色
  • brown 褐色
  • orange 橘色
  • yellow 黃色
  • green 綠色
  • blue 藍色
  • purple 紫色
  • pink 粉紅色
  • red 紅色

除了deathau的CSS片段，先前介紹過的8+8 highlight colors是另一個選擇：

安裝與啟用

1. 下載CSS檔

至下列網址下載.css檔，再存入你的儲存庫根目錄/.obsidian/snippets

  1. <https://github.com/deathau/obsidian-snippets/blob/main/notation-colour-blocks.css>
  2. <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>，檢視看看😄<br>
<li>這段文字變成<span class='note-brown'>brown 褐色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-orange'>orange 橘色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-yellow'>yellow 黃色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-green'>green 綠色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-blue'>blue 藍色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-purple'>purple 紫色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-pink'>pink 粉紅色</span>，檢視看看😄<br>
<li>這段文字變成<span class='note-red'>red 紅色</span>，檢視看看😄<br>
</ol>

 

01

2. 區域文字背景顏色

<ol><li>這段文字變成<span class='gray-bg'>gray 灰色</span>，檢視看看👼<br>
<li>這段文字變成<span class='brown-bg'>brown 褐色</span>，檢視看看👼<br>
<li>這段文字變成<span class='orange-bg'>orange 橘色</span>，檢視看看👼<br>
<li>這段文字變成<span class='yellow-bg'>yellow 黃色</span>，檢視看看👼<br>
<li>這段文字變成<span class='green-bg'>green 綠色</span>，檢視看看👼<br>
<li>這段文字變成<span class='blue-bg'>blue 藍色</span>，檢視看看👼<br>
<li>這段文字變成<span class='purple-bg'>purple 紫色</span>，檢視看看👼<br>
<li>這段文字變成<span class='pink-bg'>pink 粉紅色</span>，檢視看看👼<br>
<li>這段文字變成<span class='red-bg'>red 紅色</span>，檢視看看👼<br>
</ol>

 

02

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 紅色
```

![[Pasted image 20210920001812.png]]

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 紅色
```
03

5. 重點高亮

這是 <mark class='gray'>重點</mark> 要特別注意。<br>
這是 <mark class='brown'>重點</mark> 要特別注意。<br>
這是 <mark class='orange'>重點</mark> 要特別注意。<br>
這是 <mark class='yellow'>重點</mark> 要特別注意。<br>
這是 <mark class='green'>重點</mark> 要特別注意。<br>
這是 <mark class='blue'>重點</mark> 要特別注意。<br>
這是 <mark class='purple'>重點</mark> 要特別注意。<br>
這是 <mark class='pink'>重點</mark> 要特別注意。<br>
這是 <mark class='red'>重點</mark> 要特別注意。<br>

 

04

6. 相關連結

7. 教學影片

＃＃