搞定密码之后，下一个需要解决的就是黑幕了。我们期望的黑幕效果和原来博客的版本基本一致，所以 CSS 部分可以直接沿用过来：
body heimu,
body heimu a,
body a heimu {
display: inline;
background-color: #252525;
color: #252525 !important;
text-shadow: none;
}
body heimu:hover,
body heimu:active {
transition: color 0.13s linear;
color: #fff !important;
}
body heimu:hover a,
body a:hover heimu {
transition: color 0.13s linear;
color: #add8e6 !important;
}
但如何才能做到只对需要黑幕的博客文章启用这段 CSS 呢？这里我们写了一个简单的 rehype 插件：
function rehypeHeimuPlugin() {
return function transformer(tree, file) {
const value = file.value;
if (typeof value === "string") {
if (value.includes("<heimu>")) {
tree.children.push({
type: "element",
tagName: "style",
properties: {},
children: [
{
type: "text",
value: `
body heimu,
body heimu a,
body a heimu {
display: inline;
background-color: #252525;
color: #252525 !important;
text-shadow: none;
}
body heimu:hover,
body heimu:active {
transition: color 0.13s linear;
color: #fff !important;
}
body heimu:hover a,
body a:hover heimu {
transition: color 0.13s linear;
color: #add8e6 !important;
}
`.trim(),
},
],
});
}
}
};
},
原理也很简单，不多说了（