Adding custom CSS tags to an RMarkdown html document
Solution 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.
Solution 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)
Solution 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%;
}
Related videos on Youtube
efbbrown
Updated on June 04, 2022Comments
-
efbbrown almost 2 years
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!
-
efbbrown about 8 yearsI 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 inimg
tags inside those paragraphs. So you could access the first with the cssp:nth-of-type(1) img { enter css here... }
and the second with the cssp:nth-of-type(2) img { enter css here... }
. Hope this helps!
-
-
efbbrown about 9 yearsI 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.
-
Miguel Vazq almost 5 yearsuseful to me. Thanks. Great for self_contained = true.