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?

---
title: "RMarkdown"
author: "Me"
date: "Friday, March 27, 2015"
output:
  html_document:
    theme: null
    css: style.css
---

```{r plot1, echo=FALSE, warning=FALSE, message=FALSE}
library(ggplot2)
x <- ggplot(some_r_code)
print(x)
```

```{r plot2, echo=FALSE, warning=FALSE, message=FALSE}
y <- ggplot(some_more_r_code)
print(y)
```

I've read the info page at http://rmarkdown.rstudio.com/html_document_format.html that went a ways to answering this question but didn't get me there. I have a similar question referencing the material in that page in it's comment section, and would appreciate an answer on either.

Thanks!

I didn't but there are some workarounds you could employ. Each code chunk is rendered in a p tag and each of the plots are rendered in img tags inside those paragraphs. So you could access the first with the css p:nth-of-type(1) img { enter css here... } and the second with the css p:nth-of-type(2) img { enter css here... }. Hope this helps! — Eugene Brown
– Eugene Brown, Commented Apr 18, 2016 at 6:13

Holger Brandl · Accepted Answer · 2015-09-02 11:48:38Z

19

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.

answered Sep 2, 2015 at 11:48

Holger Brandl

11.4k3 gold badges71 silver badges65 bronze badges

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

1 Comment

Miguel Vazq Over a year ago

useful to me. Thanks. Great for self_contained = true.

stevec · Accepted Answer · 2022-07-23 05:28:47Z

3

Declaring 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)

edited Jul 23, 2022 at 5:28

answered May 5, 2020 at 15:52

stevec

55.4k52 gold badges315 silver badges437 bronze badges

Comments

hrbrmstr · Accepted Answer · 2015-03-27 01:37:02Z

1

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%;
}

answered Mar 27, 2015 at 1:37

hrbrmstr

79.1k11 gold badges146 silver badges209 bronze badges

1 Comment

Eugene Brown Over a year ago

I know I can alter the generated html file but I would like a programmatic solution that avoids applying the tags manually as you've suggested. I also want to style the plots separately and accessing the <img> tag doesn't allow me to do that.

Collectives™ on Stack Overflow

Adding custom CSS tags to an RMarkdown html document

3 Answers 3

1 Comment

Declaring custom css in RMarkdown

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Declaring custom css in RMarkdown

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related