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

  • 2021-05-10
  • css
  • 238

先前介绍使用者的方法对文字添加颜色,这个方法不只要在笔记内容加上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档

相关连结

教学影片

##

分享到Facebook
技术平台: Nasthon Systems