How to insert footnotes in ioslides presentations using RMarkdown

Question

I created a ioslides presentation by using the knitr package and it works well. Now I want to insert footnotes on my slides. I did not find any useful posts on SO. Can anyone show me how to add footnotes on R slides? Any idea?

Here is the dummy code chunk:

---
title: "R presentation"
author: "me"
date: "March 9, 2017"
output: 
    ioslides_presentation
---

## slides one
 * content
 * introduction
## Content
- Bullet 1
- Bullet 2
- Bullet 3

Do you mean real footnotes or a footer which is the same for all slides? — Martin Schmelzer, Mar 09 '17 at 10:22
@MartinSchmelzer not really, I could insert footnotes on the first or other specific slides only. Any idea? — , Mar 09 '17 at 10:36
The pandoc way to add footnotes is `^[footnote text]` http://pandoc.org/MANUAL.html#footnotes ; however, it doesn't work with ioslides, I don't know why, so I'm afraid you'll need to add them manually in html — scoa, Mar 09 '17 at 11:26
@scoa can I do that with `knitr` ? Rstudio alarmed me to load all required package for rendering R presentation, `pandoc` is installed. Do you mind to share your thought with demo code? — , Mar 09 '17 at 11:50
Yes you can, since knitr uses pandoc, but only with output format other than ioslides... Otherwise, you need raw html and maybe should tag your question with to get good answers — scoa, Mar 09 '17 at 11:51

score 11 · Answer 1 · answered Aug 08 '17 at 13:31

Martin Schmelzers answer is great, but I was lacking the possibility of formatting text in the footnote (i.e. make text italic or bold for correctly formatting literature references).

I updated his example to allow for this. See the reproducible example below. Footnotes are added like:

<footnote>A *footnote* with **formatting**</footnote>

---
title: "New footnotes"
author: "Emil Tveden Bjerglund"
date: "August 8, 2017"
subtitle: "Inspired by Martin Schmelzer"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
<style>
div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('slide:not(.backdrop):not(.title-slide)').append('<div class=\"footnotes\">');

  $('footnote').each(function(index) {
    var text  = $(this).html();
    var fnNum = (index+1).toString();
    $(this).html(fnNum.sup());

    var footnote   = fnNum + '. ' + text + '<br/>';
    var oldContent = $(this).parents('slide').children('div.footnotes').html();
    var newContent = oldContent + footnote;
    $(this).parents('slide').children('div.footnotes').html(newContent);
  });
});
</script>

## Testing footnotes
Some text.<footnote>And a footnote. http://stackoverflow.com</footnote>

Some more text.<footnote>And *another* **footnote**</footnote>

Martin Schmelzer · Accepted Answer · 2017-03-09T15:58:12.007

Here is a workaround. It might not be bullet proof and need further improvements:

Let's start with a fully reproducible example:

---
title: "Footnotes"
author: "Martin Schmelzer"
date: "9 3 2017"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

<style>
div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('slide:not(.backdrop):not(.title-slide)').append('<div class=\"footnotes\">');

    $('footnote').each(function(index) {
      var text  = $(this).html();
      var fnNum = (index+1).toString().sup();
      $(this).html(text + fnNum);

      var footnote   = fnNum + ': ' + $(this).attr('content') + '<br/>';
      var oldContent = $(this).parents('slide').children('div.footnotes').html();
      var newContent = oldContent + footnote;
      $(this).parents('slide').children('div.footnotes').html(newContent);
    });
  });
</script>



## Try out some footnotes

Lets assume I have a footnote <footnote content="The first awesoem footnote!">here</footnote>. And here we are going to have another one: <footnote content="This is my second footnote!">#secFN</footnote>


## The Second Topic

See auto numbering for <footnote content = "The counter is not set back and continues on the next slide.">footnotes</footnote>

Now let's see what I have done here:

1. We add some styles for our footnote container at the bottom of each slide.

2. We include the jQuery library.

3. What then follows is the main script:

When the document has finished loading (document.ready()) we select all slides excluding the title slides and the back drop slide. To each of them we add a footnote container (<div class="footnotes"></div>) as the last child.

Afterwards we simply go through the document and search for our footnotes which can be created the following way:

<footnote content="What should be written at the bottom?">Text</footnote>

We select all footnotes and apply a function to each of them which reads out the content of footnote and adds it to the container. The footnotes get autonumbered and the superscripts are added with sup().

This is what the result looks like:

This is great. Thank you, Martin. Happy to learn Rmarkdown, cheers :) — , Mar 09 '17 at 14:41
This just fixed a problem with my implementation, where footnotes were sliding around (rather than staying fixed to slides). Thanks for contributing it, Martin! — Wesley Burr, Sep 11 '17 at 01:00

How to insert footnotes in ioslides presentations using RMarkdown

2 Answers2

Let's start with a fully reproducible example:

Now let's see what I have done here:

This is what the result looks like: