3

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

Joanne Demmler
  • 1,406
  • 11
  • 31

1 Answers1

2

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

hrbrmstr
  • 77,368
  • 11
  • 139
  • 205
  • Not quite what I was looking for, but very informative. I'm writing my own CSS templates, but want to avoid reinventing the wheel... – Joanne Demmler Oct 11 '18 at 08:02
  • Um, how is this not the pointer to all the places the CSS properties are documented? – hrbrmstr Oct 11 '18 at 09:40
  • I'm not looking for the documentation, but a list similar to https://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf page 2 `YAML options` – Joanne Demmler Oct 12 '18 at 10:08
  • But, you're looking for _CSS_ properties. Because R Markdown relies heavily on Bootstrap that's _kinda where you have to go_ for what you're looking for. – hrbrmstr Oct 12 '18 at 10:54