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

Answer 1

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: