[Obs#39] 利用CSS變更文字顏色,侵入性小

先前介紹使用者的方法對文字添加顏色,這個方法不只要在筆記內容加上HTML標籤,也要加CSS的顏色設定,對內容的破壞性較大。這次介紹8+8 highlight colors只透過格式字串(#h/顏色形成巢狀標籤)和CSS設定就能提供16種顏色,對內容的破壞性較小,顏控可試用看看。

警告❗️

  1. #h/white** #h/red ==Markdown標準並無變更文字顏色的語法,此方法只能在Obsidian裡使用。==**
  2. 有些 #h/green 佈景主題 會造成產生PDF顏色錯誤,若發生顯示正常、PDF有誤時,換一個主題試看看

使用格式

在要變更顏色的前面加上下列設定:

  1. 設定背景色:#h/顏色 ==文字==
  2. 設定粗體前景色:#h/顏色 **文字**
  3. 設定斜體前景色:#h/顏色 _文字_

小技巧

  1. 井號左側要有空白。
  2. 可使用巢狀式格式。例如: #h/red ==#h/yellow 紅底黃字==
  3. 編輯時會因中文字造成游標定位,在井號左邊加上 #h/aqua倒引號 即能正常編輯,輸入完成後再刪除倒引號
  4. #h標籤可看到各個顏色的統計,亦可使用顏色來查詢

顏色代碼

01

顏色代碼 背景顏色

h/white white | #h/white ==白==

h/black black | #h/black ==黑==

h/red red | #h/red ==紅==

h/aqua aqua | #h/aqua ==水藍==

h/fuchsia fuchsia | #h/fuchsia ==紫紅==

h/green green | #h/green ==綠==

h/yellow yellow | #h/yellow ==黃==

h/blue blue | #h/blue ==藍==

h/gray gray | #h/gray ==灰==

h/silver silver | #h/silver ==銀==

h/maroon maroon | #h/maroon ==褐紅==

h/teal teal | #h/teal ==藍綠==

h/purple purple | #h/purple ==紫==

h/lime lime | #h/lime ==青檸綠==

h/olive olive | #h/olive ==橄欖綠==

h/navy navy | #h/navy ==藏青==

範例

基本顏色

要 #h/purple ==強調== 的文字用兩個等號,很 #h/red **重要** 的 #h/green _文字_,特別變更顏色 

要 #h/purple ==強調== 的文字用兩個等號,很 #h/red 重要 的 #h/green 文字,特別變更顏色

組合顏色

#h/white ==#h/red **白底紅字**== #h/black ==#h/red **黑底紅字**== 

h/white ==#h/red 白底紅字==

h/black ==#h/red 黑底紅字==

安裝步驟

  1. GitHub下載
  2. 設定→外觀→CSS片段→開啟CSS片段資料夾,將下載的CSS檔案複製到資料夾
  3. 啟用複製了的CSS檔

相關連結

教學影片

##


想在手機閱讀更多css資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems