Hugo Apéro + blogdown：如何分别设置行内代码与代码块背景色

• 找到你网站的自定义CSS文件（通常在assets/css/custom.css，没有的话可新建），添加以下代码：

/* 自定义行内代码背景色（绿色） */
code:not(pre > code) {
  background-color: #d4edda; /* 可替换为你想要的绿色色值 */
  padding: 2px 4px;
  border-radius: 3px;
}

/* 自定义代码块背景色（白色） */
pre > code,
.highlight {
  background-color: #ffffff;
  /* 可选：补充样式保证和主题协调 */
  border: 1px solid #e1e1e1;
  padding: 1rem;
  border-radius: 6px;
}

• 代码说明：

  • code:not(pre > code) 精准选中所有不在<pre>标签内的<code>元素，也就是行内代码，避免和代码块内的<code>冲突；
  • pre > code 和 .highlight 是Hugo Apéro中代码块的常见选择器，覆盖绝大多数代码块场景。

• 保存后重新生成网站（用blogdown::serve_site()或hugo server命令），刷新页面即可生效。

如果选择器不生效，可通过浏览器开发者工具（F12）查看代码块/行内代码的实际HTML结构，调整选择器匹配对应类名或层级即可。

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