[Obs＃52] 變更段落顏色與重點高亮度的CSS片段
這次不介紹外掛，而是介紹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＃97] Highlightr外掛豐富Obsidian筆記的外觀 (0則留言, 2022/10/02)
- Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
- [Obs＃86] 分享與編輯器相關的21個Obsidian外掛 (0則留言, 2022/05/08)
- [Obs＃107] Obsidian全方位搜尋：OmniSearch外掛 (0則留言, 2022/11/20)
- [Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便 (0則留言, 2022/09/10)
- [Obs＃92] Obsidian彙編文章的簡單方法：2個外掛＋1個CSS片段 (0則留言, 2022/07/16)
- [Obs＃35] Buttons外掛開啟筆記自動化操作契機⁉️ (0則留言, 2021/04/23)
- Obs149-左邊長筆記，右邊卡片的編輯佈局：Query Control, Note Gallary (0則留言, 2024/01/28)
- Obsidian 1.0新手教學—打造個人知識管理利器，專屬的第二大腦 (2022年) (4則留言, 2022/10/22)
- Obs147｜簡易試算表外掛：CalcCraft，運算式儲存格 (0則留言, 2023/12/10)
- Obs145｜輔助Markdown初學者的Editing Toolbar外掛 (0則留言, 2023/12/02)
- Obs152｜終於能產生書籤與頁碼了！與PDF相關的外掛：Better Export PDF＆PDF++ | 修訂 (0則留言, 2024/02/18)
Sorry, 很久沒用Google sc…