Adding custom CSS tags to an RMarkdown html document

Question

I have an RMarkdown document outputting to HTML of the same form as the below example. What do I add where to apply unique CSS ids or classes to each plot output?

Answer 1

You can tell knitr (which is used under the hood) with results="asis" to embed a chunk's output directly into the html. Within the chunk you can use cat to simply write a style tag including your css definitions:

```{r results="asis"}
cat("
<style>
h1 {
   color: red;
}
</style>
")
```

See http://yihui.name/knitr/options/#chunk_options for details.

Answer 2

Here are some additional ways of achieving custom css in RMarkdown

• Add css between <style> and </style> tags in the regular body of the RMarkdown (i.e. not in R code area), like so:

<style>
.pad {
    padding-top: 200px; 
}
</style>

# This heading will be padded {.pad}

• Another option is to declare css: "style.css" in yaml and store styles in a separate file (style sheet) in the same directory
• Or css can be generated and applied via R code (excellent example here)

Answer 3

Open the resultant HTML in a browser with a Developer Tools option and look at the generated HTML. Then apply you styling to the appropriate tags/classes. For example, put the following into style.css, knit the file and you should see a red border on the plots:

img {
  background-color: red;
  padding: 2px;
  border: 1px solid red;
  border-radius: 3px;
  margin: 0 5px;
  max-width: 100%;
}