2

I would like to change the background color of R chunks and R chunk outputs in bookdown gitbook. Tried following https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html section 7.3, Changing chunk background color in RMarkdown or https://github.com/yihui/knitr-examples/blob/master/116-html-class.Rmd

but without success.

I have edited the minimal example from here: https://github.com/rstudio/bookdown-demo with this in style.css

.Rchunk {
  background-color: #f2dede;
  font-weight: bolder;
  color: red;
}

.Rout {
  background-color: #d9edf7;
  font-weight: bolder;
  color: blue;
}

and this in index.Rmd arround # Prerequisite

```{r, echo=FALSE}
knitr::opts_chunk$set(fig.align='center', out.width='60%', class.source="Rchunk", class.output="Rout", comment="", prompt=TRUE) 
```


# Prerequisites

```{r}
summary(iris$Sepal.Length)
```

As shown in the first picture the class is passed in the html file and the font-weight: bolder; is shown but not the font and background color. It's actually there but masked but another css style

.book .book-body .page-wrapper .page-inner section.normal pre {
    overflow: auto;
    word-wrap: normal;
    margin: 0 0 1.275em;
    padding: .85em 1em;
    background: #f7f7f7;
}

Is there a way to remove the grey background call so that the colorful class can be shown?

Grey background

Colorful background

GaelS
  • 630
  • 6
  • 15
  • have a look here: https://github.com/yihui/knitr/issues/1333 – MarBlo Jan 08 '21 at 10:46
  • Thanks, i follow this code, it works well with Rmd files but not for bookdown - gitbook format. – GaelS Jan 08 '21 at 11:01
  • 1
    @cderv yes thanks, the `!important` was the key. Don't know how i missed that question with `bookdown` and `background color` in my search. – GaelS Jan 12 '21 at 12:28

1 Answers1

3

Thanks to @cderv for pointing me to the right direction. just needed to add !important to the css styles i want to prioritize:

.Rchunk {
  background-color: #f2dede !important;
  font-weight: bolder;
  color: red !important;
}

.Rout {
  background-color: #d9edf7 !important;
  font-weight: bolder;
  color: blue !important;
}
GaelS
  • 630
  • 6
  • 15