cssrbookdowngitbook

change R chunk background color in bookdown gitbook


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


Solution

  • 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;
    }