Rmarkdown: Different formats for code and output with .css

Question

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?

Martin C. Arnold · Accepted Answer · 2020-11-07 21:10:24Z

2

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.

answered Nov 7, 2020 at 21:10

Martin C. Arnold

9,7281 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rmarkdown: Different formats for code and output with .css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related