如何修复RevealJS中代码输出区域角落背景不匹配问题？

问题描述 #

渲染RevealJS文档时，代码输出区域的角落背景色与输出主体区域不一致（见下图红色箭头标注），需要将角落背景改为和输出区域一致的颜色。

原配置代码 #

Quarto文档代码 #

---
title: "Numpy in python"
format: 
  revealjs:
    theme: theme.scss
jupyter: python3
highlight-style: "dracula"
execute: 
  echo: true
---

## Creating 1D arrays from lists

```{python}
import numpy as np
data = [1, 2, 3, 4]
array_1d = np.array(data)
print(array_1d)

### 原theme.scss代码
```scss
/*-- scss:defaults --*/

@font-face {
    font-family: 'FiraCode';
    src: url('../../../../../fonts/FiraCode-Medium.woff2') format('woff2'),
         url('../../../../../fonts/FiraCode-Medium.woff') format('woff');
}

$font-family-monospace: 'FiraCode';

/*-- scss:rules --*/

.reveal pre code {
  background-color: #F2F0EF;
  color: #000;
  border-radius: 10px;
  font-family: "FiraCode";
  font-weight: "Regular";
}

.reveal div.sourceCode {
  border: none;
  border-radius: 10px;
  margin-bottom: 10px !important;
}

.reveal div.sourceCode pre code {
  padding: 25px;
}

修复方案 #

问题根源是代码输出的外层容器未设置与代码块一致的背景色，仅给内层代码块设置了样式。修改theme.scss，添加以下样式规则：

/*-- scss:defaults --*/

@font-face {
    font-family: 'FiraCode';
    src: url('../../../../../fonts/FiraCode-Medium.woff2') format('woff2'),
         url('../../../../../fonts/FiraCode-Medium.woff') format('woff');
}

$font-family-monospace: 'FiraCode';

/*-- scss:rules --*/

.reveal pre code {
  background-color: #F2F0EF;
  color: #000;
  border-radius: 10px;
  font-family: "FiraCode";
  font-weight: "Regular";
}

.reveal div.sourceCode {
  border: none;
  border-radius: 10px;
  margin-bottom: 10px !important;
}

.reveal div.sourceCode pre code {
  padding: 25px;
}

/* 新增：修复代码输出区域角落背景 */
.reveal .output pre {
  background-color: #F2F0EF;
  border-radius: 10px;
  padding: 0;
}

.reveal .output pre code {
  border-radius: 0;
}

修复说明 #

• 给代码输出的外层容器.reveal .output pre设置与代码块相同的背景色和圆角，同时移除默认内边距，避免嵌套容器的内边距导致角落露出底色
• 重置内层代码块.reveal .output pre code的圆角为0，因为外层容器已经设置了圆角，内层无需重复设置，防止出现双层圆角缝隙

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