How do I change the corners of the code output to match the background?

[shubhamdutta26]

Description

When I render the revealjs document, the code output div/ section has the corners which are not the same background color as the output (see attached image with red arrows). Can this be fixed to match the output background?

revealjs file

---
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 file contents:

/*-- 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;
}

[mcanouil]

You need to use your favourite browser and its developer mode to inspect the structure of the block you already modified and all the (S)CSS rules related to it.

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

---

edit:

Screen.Recording.2025-09-24.at.21.32.25.mov

[shubhamdutta26]

Thank you. I tried to format the code blocks. Please let me know if this is something you suggested.