最前

本文之前标题拟作“元素添加背景的另个方式”，但思考后还是改为“通过‘滤镜玻片’替代背景的添加”更加贴切，正文内容可以说明此。

背景

在吾辈开发本站定制代码块样式过程中，一开始依赖 rehype-prism-plus，配合该库的示例样式表文件，生成默认代码块样式。

rehype-prism-plus + 该库的示例样式表文件带来的代码块样式中：a. 行号随水平滚动行为一起滚动；b. 高亮行的背景色通过 backgroundColor + alpha 通道（或 opacity） 设置。

直观的，可通过该博文小节可见：Parsing markdown code blocks

不过个人对于代码块的 UI 展示有更进一步的要求，和官方默认样式出入。其中一点是： 当开启代码块左侧行号显示时，行号固定，不随水平滚动而滚动。

正文

在如何处理高亮行的背景色过程中，有必要考虑如下的点：

1. 代码块本身有个主题背景色；
2. 高亮行、以及 diff 模式下新增行、删除行的各自的背景色

来看不同设置背景色下的直观效果对比：

0.初始样式，行号一起滚动

初始样式表的行高亮实现方案，对于高亮行、新增行、删除行的背景颜色，使用 background-color 设置，同时为了透出代码块本身主题颜色，使用 alpha 通道开启透明度 （rgb(51 65 85/0.5)）。

当左侧行号随水平滚动动作一起滚动时，该方案适合，不会有违和感。效果如下：

1. 透明背景带来行号区域问题

• 但是在吾辈的固定行号的场景中，如果透明度开启，则代码会随水平滚动透过在行号区域下。

2. 非透明背景不适合不同主题色

• 此时，如果去掉高亮行背景色的透明度设置，虽然能解决行号背景透明而显示其下滚动区域的文字的 UI 问题，但是 UI 上一套行高亮的配色方案，很难适配不同主题下的代码块主题配色。

3.解决方案

所以，需要另一个背景色的设置方案，不再通过 background-color + alpha 通道（或 opacity） 设置；

这个解决方案里，本质是为元素添加一个透明的遮罩层。示例代码如下

.highlight-line {
  @apply relative after:pointer-events-none after:absolute after:inset-0 after:bg-teal-400 after:opacity-20 after:content-[''];
}

效果如下：

以上的，使用遮罩替代背景设置，即很好的保证了左侧行号区域本身的不透明性（不会再出现透出底部水平滚动文字的问题），另一点，位于顶部遮罩开启透明度，也能最大程度的不与当前代码块整体主题配色发生冲突。

总结

以上所述，简要来说，

• 通过为高亮元素本身设置 background-color background-image 依然是主流的背景色设置方案；
• 而一种场景中，当容器元素本身有个主题色，此时为了契合主题色，为高亮元素本身设置 background-color + alpha 通道（或 opacity）也是可行的背景设置方案。
• 而当场景进一步要求，比如元素中设有需要固定区域，不随横向或纵向的滚动而滚动，那么考虑通过在高亮元素本身上设置一个透明度的遮罩层同样是个可纳入方案。