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

在想要[[#blue]]==高亮==的内容前加一个特殊标记的页面引用。
span[data-ref="#blue"] {
  display: none;
}
span[data-ref="#blue"] + mark {
  background: #abdfff;
}

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

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

1 个赞

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

CSS放在 custom.css 中,参照截图:

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 结尾的)我没用,放在这里仅供参考。

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

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

1 个赞