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