Custom Code Chunk css

By default in a quarto document, the code and output look something like this:

set.seed(2025)
rnorm(10)

 [1]  0.62075674  0.03564140  0.77315448  1.27248909  0.37097543 -0.16285434
 [7]  0.39711189 -0.07998932 -0.34496518  0.70215136

Maybe this is just me not wanting my peas to touch my mashed potatos, but I don’t like how close the output is to the text of the document. I also feel like it gets a little visually confusing if I have a long paragraph,

rnorm(10)

 [1] -0.39569639 -1.75505405 -0.42096376  0.76490961  1.06616211 -0.19369636
 [7] -0.05214701  0.41767082 -1.31269403  2.42901921

and then a short one

rnorm(10)

 [1] -0.24457065  0.73378542  2.85278145  0.67152530 -0.11584926 -1.30135199
 [7] -0.91780026  0.05071605 -0.38013286  0.72262510

and then a third.

What I really want is my code output to be bundled up with the entire code chunk. I’ve worked out how to make it happen with some css, so now my code chunks and outputs look like this:

rnorm(10)

 [1] -1.0257576  1.8198706 -1.2704175  0.5888158 -0.6342534 -1.2658154
 [7]  0.2837490 -1.4817612  0.9118797  0.9714688

The code input and output are wrapped up together visually, and remain distinct from the surrounding prose.

The scss

I’ve set this up across three scss files, even though for the most part it’s not making use of the features of scss.

custom.scss

/*-- scss:rules --*/
.cell:not(.page-full):has(.cell-output){
    padding: 2%;
    border-radius: 10px;
    margin-bottom: 1em;
 }

light.scss

/*-- scss:rules --*/
.cell:not(.page-full):has(.cell-output){
    background-color: $gray-100;
 }

dark.scss

/*-- scss:rules --*/
.cell:not(.page-full):has(.cell-output){
   background-color: $gray-800;
 }

The separate light and dark files are there so the background color of the full wrapper is appropriate for light/darkmode. These all get included in my quarto configuration like so:

_quarto.yml

#...
format:
  html:
    theme:
      light: [flatly, custom.scss, light.scss]
      dark: [darkly, custom.scss, dark.scss]
#...

Why those selectors?

So, the .cell class targets the entire code cell (input and output). To be honest, I can’t reconstruct why I have a :not(.page-full) modifier in there. I must’ve done it to capture some edge case though, so I don’t question it.

I do remember why I have the :has(.cell-output) part. The lighter enclosing div only appears when there’s code output. If I have code that doesn’t print anything, it’s just the normal default quarto formatting.

a <- rnorm(10)

It’s also the case that figures don’t get rendered into a .cell-output div, so plotting code also gets the default quarto formatting.

library(ggplot2)

p <- ggplot(
  mtcars,
  aes(mpg, disp)
) +
  geom_point()

print(p)

Same for gt tables.

library(gt)

car_tab <- gt_preview(mtcars) |>
  fmt_number(
    decimals = 1,
    drop_trailing_zeros = T
  ) |>
  cols_align_decimal() |> 
  opt_table_font(font = "Public Sans")

car_tab

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
1	21	6	160	110	3.9	2.6	16.5	0	1	4	4
2	21	6	160	110	3.9	2.9	17	0	1	4	4
3	22.8	4	108	93	3.9	2.3	18.6	1	1	4	1
4	21.4	6	258	110	3.1	3.2	19.4	1	0	3	1
5	18.7	8	360	175	3.1	3.4	17	0	0	3	2
6..31
32	21.4	4	121	109	4.1	2.8	18.6	1	1	4	2

This is super handy, because if I don’t echo the code chunks, the figures and tables show up in the document just like you’d expect

	mpg	disp
1	21	160
2	21	160
3	22.8	108
4	21.4	258
5	18.7	360
6..31
32	21.4	121

But if I have unechoed code that prints code output, it will still show up with the shaded outline.

 [1]  1.2731270  1.4622685 -0.6110828 -0.3605532 -1.5291518  1.1332638
 [7] -0.4407391  0.1296048  0.8712326  0.5055147

The one thing to watch for

If ggplot returns some warnings, and you don’t have warnings in the output suppressed, the warning and the plot will all wind up in the .cell-output, even if you turn off code echoing.

library(palmerpenguins)

ggplot(
  penguins,
  aes(
    bill_length_mm, 
    bill_depth_mm
  )
) +
  geom_point()

Warning: Removed 2 rows containing missing values or values outside the scale range
(`geom_point()`).