How to print html pages with colors?

[melgoussi]

i have created html using rmarkdown, however I can not print using chrome or firefox as pdf in colors.
it gives black and white only.

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css, echo=FALSE}
h2 {
  font-size: 32px;
  color: red;
}
```



## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

[HanOostdijk]

Hello Mohamed,

it works for me (Windows 10 Firefox 91.0.2), but I don't know why, if I add !important to the color spec :

```{css, echo=FALSE}
h2 {
  font-size: 32px;
  color: red !important;
}
```

[melgoussi]

Thanks for the info. It works fine with me.
May I ask: !important
Stands for what ... or what is doing.

[cderv]

I think this is related by the fact that default document is using Bootstrap 3 and this framework has some specific CSS rules for printing. This is a limitation (issues) of Bootstrap 3.

Please see the discussion in

Can't Apply CSS Color to Standart RMarkdown HTML file with chrome_print() [to PDF]

Setting !important is a way to make the CSS rules the most important, so it will override any other and so it will apply even during Printing.

As I explained in the issue linked above, you could use newer version of bootstap to avoid this issue.

---
title: "Untitled"
output: 
  html_document:
    theme:
      version: 4
---

it should be better.