使用Highlight JS时，如何保留语法高亮并将代码块背景设为白色？

解决办法 #

1. 修正CSS选择器，命中正确元素 #

Agate主题的背景色样式是定义在pre.hljs标签上，而非code标签，所以你之前的选择器没覆盖到目标元素。改用以下样式：

pre.hljs {
    background: #FFFFFF;
}

如果页面存在reveal容器嵌套，可添加父选择器提升优先级：

.reveal pre.hljs {
    background: #FFFFFF;
}

2. 调整CSS加载顺序 #

确保你的自定义CSS文件在Highlight.js的Agate主题CSS之后引入，后加载的样式才能覆盖主题默认规则：

<!-- 先加载Agate主题 -->
<link rel="stylesheet" href="path/to/agate.css">
<!-- 后加载自定义样式 -->
<link rel="stylesheet" href="path/to/your-custom.css">

3. 应急方案：使用!important强制覆盖（尽量少用） #

如果前两种方法无效，可临时用!important强制生效，但这会增加后续样式维护成本，仅作为临时解决手段：

.reveal pre.hljs {
    background: #FFFFFF !important;
}

内容的提问来源于stack exchange，提问作者Skrillx