为Obsidian添加仿真荧光笔高亮样式

效果如图: https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2024/10/0822652da55dab7b75749172c24e96a7.png

参考:

鉴于安装的插件和CSS样式太多,我强制用了!important, 所以代码比较丑陋。

如何安装

1. 安装插件highlightr

如果只需要黄色样式的高亮效果,则不需要安装这个插件。 安装链接:obsidian://show-plugin?id=highlightr-plugin

highlight method设置为css-classed image.png

2. 安装CSS代码片段

首先打开CSS代码片段存放的文件夹: image.png

然后点击 -> subtle-hightlight.css下载css代码,下载后将subtle-highlight.css存到代码片段的文件夹中

或者复制下面的代码后在该文件夹下创建一个叫subtle-highlight.css 的文件:

css
span.cm-highlight{
background: linear-gradient(
100deg,
#ffffaf00 1%,
#ffffaf 2.5%,
#ffffaf80 5.7%,
#ffffaf1a 93%,
#ffffafb4 95%,
#ffffaf00 98%
),
linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%) !important;
}
mark:not([class]) {
background: linear-gradient(
100deg,
#ffffaf00 1%,
#ffffaf 2.5%,
#ffffaf80 5.7%,
#ffffaf1a 93%,
#ffffafb4 95%,
#ffffaf00 98%
),
linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%) !important;
}
.hltr-pink {
background: linear-gradient(
100deg,
#ffafd400 1%,
#ffafd4 2.5%,
#ffafd480 5.7%,
#ffafd41a 93%,
#ffafd4b4 95%,
#ffafd400 98%
),
linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%) !important;
}
.hltr-green {
background: linear-gradient(
100deg,
#b8ffaf00 1%,
#b8ffaf 2.5%,
#b8ffaf80 5.7%,
#b8ffaf1a 93%,
#b8ffafb4 95%,
#b8ffaf00 98%
),
linear-gradient(182deg, #b8ffaf00, #b8ffaf4d 8%, #b8ffaf00 15%) !important;
}
.hltr-blue {
background: linear-gradient(
100deg,
#afd7ff00 1%,
#afd7ff 2.5%,
#afd7ff80 5.7%,
#afd7ff1a 93%,
#afd7ffb4 95%,
#afd7ff00 98%
),
linear-gradient(182deg, #afd7ff00, #afd7ff4d 8%, #afd7ff00 15%) !important;
}

添加css文件后点击左边的“重新加载按钮”: image.png

找到该文件后打开: image.png

然后就可以啦

如何使用

对于黄色来说,用 ==需要高亮的内容== 就可以了,而对于其他颜色,安装highlightr之后,选择需要高亮的文字,然后右键选择颜色即可,如图:

image.png 目前只有粉色、绿色、蓝色有荧光笔仿真效果。 image.png

%sveltekit.body%