Rmarkdown: Different formats for code and output with .css

user_2234008 0
Viewed 218

I can include something like

<style>

code {
  font: 12px Monaco, "Courier New";
  color: #969699;
}

</style>

in a .css file to format my code in Rmarkdown. The problem is that the R output also inherits this font. Is there any way to give my code and the R output different fonts?

bookdown r-markdown knitr css
1 Answers

R source code in rmarkdown HTML output is placed between a <code> tag that lives inside a <pre> with class r. You want to apply the style to all instances of <code> that don't share this property. Here's an example using the :not() selector:

pre:not(.r) code {
  font: 12px Monaco, "Courier New";
  color: red;
}

For bookdown output formats you want to exlcude instances of <code> with class sourceCode:

code:not(.sourceCode) {
  font: 12px Monaco, "Courier New" !important;
  color: red !important;
}

Note that the use of !important is required here because the default styles have precedence.

user_38341390
Related