自定义高亮颜色的简便方法

分享
#1 
在想要[[#blue]]==高亮==的内容前加一个特殊标记的页面引用。

span[data-ref="#blue"] {
  display: none;
}
span[data-ref="#blue"] + mark {
  background: #abdfff;
}

像上面这样组合使用就可以自定义出你想要的各种颜色了。效果：

image
image692×109 23.3 KB

BTW，同样的技巧也可以给文字设置各种颜色，只要将上面 mark 部分的CSS做相应调整就行。也就是同样使用 == 做高亮，但效果却不是改背景色而是前景色。

1 个赞
高频需求：字体颜色、背景颜色
#2

请教一下，你这个怎么用？需要把这个代码放在哪里？谢谢。

#3

CSS放在 custom.css 中，参照截图：

image
image798×458 32.4 KB 

span[data-ref="#red"],
span[data-ref="#green"],
span[data-ref="#blue"],
span[data-ref="#redf"],
span[data-ref="#greef"],
span[data-ref="#bluef"] {
  display: none;
}
span[data-ref="#red"] + mark {
  background: #ffc7c7;
}
span[data-ref="#green"] + mark {
  background: #ccffc1;
}
span[data-ref="#blue"] + mark {
  background: #abdfff;
}
span[data-ref="#redf"] + mark {
  color: #ffc7c7;
  background: none;
  padding: 0;
  border-radius: 0;
}
span[data-ref="#greef"] + mark {
  color: #ccffc1;
  background: none;
  padding: 0;
  border-radius: 0;
}
span[data-ref="#bluef"] + mark {
  color: #abdfff;
  background: none;
  padding: 0;
  border-radius: 0;
}

这个设置是我自己用的，前景色（以 f 结尾的）我没用，放在这里仅供参考。

1 个赞
#4

收到。谢谢你了。学到一个新知识啊。

#5

现在有插件了，Text Wrapper，推荐尝试。

1 个赞
#6

请教一下，代码，也就是 ` 那个键括起来的代码标注，它的底色设置是哪一项，我想改一下默认模板上的底色，太淡了。

#7 
code {
  ...
}