Writing a side note on R markdown html

[Dallak]

Hello,

I am wondering how I can write a side note in R markdown HTML; something like the following (small & colored):

I tried using:

This is a test example

but it produced a normal quotation as below.

[Yarnabrina]

I think the required output format is tufte_handout.

Consider this:

---
title: "TRYING OUT TUFTE HANDOUT STYLE"
output:
  tufte::tufte_html: default
  tufte::tufte_handout: default
---

```{r setup, include=FALSE}
library(tufte)
```

some random words

```{r}
set.seed(seed = 43518)
x <- rnorm(n = 10)
qqnorm(y = x)
```

more random words ^[adding a sidenote]

bla bla bla

It generates the following:

I haven't used it before, so don't know whether it is possible to make it colourful or not. I hope someone else will provide that information.

[Dallak]

Thank you Yarnabrina!
It worked!

[dcruvolo]

Using @Yarnabrina's solution, I've added the styling for something simple like changed the text color to blue.

When I opened the developer tools, I found that the side note is rendered into a <span> element with the class .sidenote. I created a css file (styles.css) and placed in in the same directory as the Rmarkdown file. Here's the css.

.sidenote {
    color: blue;
}

CSS files can be linked in the YAML using the css param. If you were to use the Tufte theme, it would look like this.

---
title: "TRYING OUT TUFTE HANDOUT STYLE"
output:
  tufte::tufte_html:
    css: "styles.css"
  tufte::tufte_handout: default
---

The Tufte theme is fairly opinionated in terms of layout and design. Using ^[some text] would render as a footnote in other themes rather than a side note. Technically, all side notes should be rendered in the html element <aside> rather than a <span> for good semantic HTML practices. However, there isn't a good way to add <asides> in markdown. Instead, you will have to open and close the tags manually: <aside>my sidenote</aside>, and then style the aside element in the css file. This might not be ideal, but it would be a way to replicate the same layout if you weren't using the Tufte theme.

First, here's how you would create an <aside> (using the same text and updated yaml)

---
title: "TRYING OUT SIDENOTES"
output: 
    html_document:
        css: "styles.css"
---

more random words <aside>adding a sidenote</aside>

In the css file...

aside {
    float: right;
    color: blue;
}

Hope that helps!