如何使用 RMarkdown 在 ioslides 演示文稿中插入脚注
How to insert footnotes in ioslides presentations using RMarkdown
我使用 knitr
包创建了一个 ioslides 演示文稿,效果很好。现在我想在我的幻灯片上插入脚注。我没有在 SO 上找到任何有用的帖子。谁能告诉我如何在 R 幻灯片上添加脚注?有什么想法吗?
这是虚拟代码块:
---
title: "R presentation"
author: "me"
date: "March 9, 2017"
output:
ioslides_presentation
---
## slides one
* content
* introduction
## Content
- Bullet 1
- Bullet 2
- Bullet 3
这是一个解决方法。它可能不是防弹的,需要进一步改进:
让我们从一个完全可重现的例子开始:
---
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>
现在让我们看看我在这里做了什么:
1. 我们在每张幻灯片的底部为我们的脚注容器添加了一些样式。
2. 我们包含 jQuery 库。
3. 接着是主脚本:
文档加载完成后 (document.ready()
) 我们 select 所有幻灯片,不包括标题幻灯片和背景幻灯片。我们为他们每个人添加一个脚注容器 (<div class="footnotes"></div>
) 作为最后一个 child.
然后我们简单地浏览文档并搜索我们的脚注,脚注可以通过以下方式创建:
<footnote content="What should be written at the bottom?">Text</footnote>
我们 select 所有脚注并对每个脚注应用一个函数,该函数读取 footnote
的内容并将其添加到容器中。脚注自动编号,上标添加 sup()
。
结果是这样的:
很棒,但我无法在脚注中设置文本格式(即将文本设置为斜体或粗体以正确设置文献参考格式)。
我更新了他的示例以允许这样做。请参阅下面的可重现示例。添加脚注如下:
<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://whosebug.com</footnote>
Some more text.<footnote>And *another* **footnote**</footnote>
我使用 knitr
包创建了一个 ioslides 演示文稿,效果很好。现在我想在我的幻灯片上插入脚注。我没有在 SO 上找到任何有用的帖子。谁能告诉我如何在 R 幻灯片上添加脚注?有什么想法吗?
这是虚拟代码块:
---
title: "R presentation"
author: "me"
date: "March 9, 2017"
output:
ioslides_presentation
---
## slides one
* content
* introduction
## Content
- Bullet 1
- Bullet 2
- Bullet 3
这是一个解决方法。它可能不是防弹的,需要进一步改进:
让我们从一个完全可重现的例子开始:
---
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>
现在让我们看看我在这里做了什么:
1. 我们在每张幻灯片的底部为我们的脚注容器添加了一些样式。
2. 我们包含 jQuery 库。
3. 接着是主脚本:
文档加载完成后 (document.ready()
) 我们 select 所有幻灯片,不包括标题幻灯片和背景幻灯片。我们为他们每个人添加一个脚注容器 (<div class="footnotes"></div>
) 作为最后一个 child.
然后我们简单地浏览文档并搜索我们的脚注,脚注可以通过以下方式创建:
<footnote content="What should be written at the bottom?">Text</footnote>
我们 select 所有脚注并对每个脚注应用一个函数,该函数读取 footnote
的内容并将其添加到容器中。脚注自动编号,上标添加 sup()
。
结果是这样的:
我更新了他的示例以允许这样做。请参阅下面的可重现示例。添加脚注如下:
<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://whosebug.com</footnote>
Some more text.<footnote>And *another* **footnote**</footnote>