How to insert footnotes in ioslides presentations using RMarkdown - r

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

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>

Answer 2

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: