CODEWITHSUNDEEP
rrstudior-markdown
Joanne Demmler
Joanne Demmler

Reputation: 1446

Predefined CSS properties in R Markdown

Is there somewhere a complete list of predefined CSS properties that can be used in R Markdown documents?

Some options are listed in the R Markdown/R Studio/Bookdown documentation, but I'm pretty sure this is not an exhaustive list.

For example

HTML
.tabset
.tabset-fade
.tabset-pills

ioslides
.smaller
data-background
data-background-size

Upvotes: 3

Views: 867

Answers (1)

hrbrmstr
hrbrmstr

Reputation: 78832

You can follow the path from the function to the base template and supporting components:

https://github.com/rstudio/rmarkdown/blob/0ff85d8db1c1b75386cc752062f6016884709139/R/html_document.R#L265 => https://github.com/rstudio/rmarkdown/blob/0ff85d8db1c1b75386cc752062f6016884709139/inst/rmd/h/default.html => https://github.com/rstudio/rmarkdown/tree/ec8fd0fe0cb82d1a2a0160c8e728486ca45c9891/inst/rmd/h

That's likely going to be frustrating (though it's worth examining the magic behind the curtain) since there's no CSS file with those definitions in them.

An alternative is to create a test HTML R Markdown document with parameters like this:

output: 
  html_document:
    self_contained: false
    keep_md: true

and inspect the target elements in Developer Tools in your browser:

enter image description here

A careful look will show you the RStudiotians rely on bootstrap for the underlying styling (I deliberately didn't put the mouse cursor on the <div> element so you'd explore that and see it's still relying on bootstrap).

A while back I through together a set of example R Markdown Templates so folks could see how the sausage is made and make their own templates. It (https://gitlab.com/hrbrmstr/markdowntemplates) might be handy to see where all the bits come from during the conversion process.

The CSS for the R Markdown ioslides doc type is here: https://github.com/rstudio/rmarkdown/tree/master/inst/rmd/ioslides/ioslides-13.5.1/theme/css

Upvotes: 2

Related Questions