Is it possible to remove slide-number and footer elements from the title slide in Quarto?
---
title: "My prez"
format:
revealjs:
slide-number: c
footer: "Confidential"
---
Thanks!
You can do this using Revealjs API methods. So write the necessary Js code (To capture the event of slide being ready and slide changed and if the current slide is title slide, change the display of footer and slide number to none) in a html file and then attach that file to qmd file using include-after-body.
---
title: "My prez"
format:
revealjs:
slide-number: c
footer: "Confidential"
include-after-body: clean_title_page.html
---
## Slide A
## Slide B
clean_title_page.html
<style>
.hide {
display: none !important;
}
</style>
<script>
function remove() {
let footer = document.querySelector('div.footer');
let slideNo = document.querySelector('div.slide-number');
slideNo.classList.add('hide');
footer.classList.add('hide');
Reveal.on('slidechanged', event => {
if(Reveal.isFirstSlide()) {
slideNo.classList.add('hide');
footer.classList.add('hide');
} else {
slideNo.classList.remove('hide');
footer.classList.remove('hide');
}
});
}
window.onload = remove();
</script>
Related
I would like to have a download button in the middle of a sentence to a pdf or csv document for example. This means there should be a small button in the sentence suggesting that you can download a document, not in a navigation or side bar. Here is some reproducible code:
---
title: "Download button in text Quarto"
format:
html:
code-fold: true
engine: knitr
---
I would like to have a download button [here]() for pdf or CSV document for example.
I am not sure if it is possible to implement a clean button in a sentence using downloadthis package because it should be in the middle of a sentence with text around.
Update
I have create quarto shortcode extension downloadthis that provides a shortcode to embed a download button more easily (in comparison to my old answer) and doesn't require to use an R package (but of course, this extension is inspired by {downloadthis})
So after installing that shortcode, we can use the shortcode as following,
---
title: "Download button in text Quarto"
format:
html:
css: style.css
engine: knitr
---
The following button is a download button for matcars data {{< downloadthis mtcars.csv
label="Download data" dname=mtcars id=mtcars-btn >}} You can download the mtcars data as csv file by clicking on it.
style.css
#mtcars-btn {
font-size: xx-small;
padding: 0.2rem 0.3rem !important;
}
#down-btn {
margin-right: 2px;
margin-left: 2px;
}
a:has(#mtcars-btn) {
text-decoration: none !important;
}
Explore here for more options and live demos.
Old Answer
Using a bit of CSS and javascript, it is possible to do very easily.
---
title: "Download button in text Quarto"
format:
html:
code-fold: true
include-after-body: add_button.html
engine: knitr
---
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars dataset",
output_extension = ".csv",
button_label = "Download data",
button_type = "default",
self_contained = TRUE,
has_icon = TRUE,
icon = "fa fa-save",
id = "mtcars-btn"
)
```
The following button is a download button for matcars data <span id="down-btn"></span> You can download the mtcars data as csv file by clicking on it.
add_button.html
<style>
#mtcars-btn {
font-size: xx-small;
padding: 0.2rem 0.3rem !important;
}
#down-btn {
margin-right: 2px;
margin-left: 2px;
}
a:has(#mtcars-btn) {
text-decoration: none !important;
}
#mtcars-btn:focus,
#mtcars-btn:active {
box-shadow: none !important;
}
#mtcars-btn:hover {
transition: 0.2s;
filter: brightness(0.90);
}
#mtcars-btn:active {
filter: brightness(0.80);
}
</style>
<script>
function add_button() {
/* get the R generated button by its id */
let mtcars_btn = document.querySelector("a:has(#mtcars-btn)");
mtcars_btn.href = '#mtcars-btn';
/* get the placeholder where you want to put this button */
let down_btn = document.querySelector("span#down-btn");
/* append the R generated button to the placeholder*/
down_btn.appendChild(mtcars_btn)
}
window.onload = add_button();
</script>
Explanation
So what I have done here
At first, created a download button using the downloadthis with an id=mtcars-btn so that we can get hold of this generated button with js code using this #mtcars-btn id selector
Then created a placeholder inside the paragraph text using <span></span>, where I want the download button to be and also in this case, assigned an id down-btn to that span, so that we can target this span using #down-btn.
Then using js, simply appended that generated download button to placeholder span tag so that the button is in the place where we wanted it to be.
Lastly, used some css to make this button smaller, reduced button padding, created a bit left and right margin and removed the underline.
Thats it!
Is there a way to change the font and color in the YAML title in a R markdown flexdashboard?
Here is the code for the YAML header I am trying to change:
---
title: "Greenhouse gases and weather data"
fontsize: 30
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
social: menu
source_code: embed
theme: readable
---
The other option would be to add a CSS code chunk anywhere in the dashboard
```{css}
body > div.navbar.navbar-inverse.navbar-fixed-top > div > div.navbar-header > span.navbar-brand {
font-size: 26px;
color: red;
}
```
as Kat said, the color is set by CSS , therefore you can change the behaviour in the .rmd file itself, or in the underlying theme template .css file.
somewhere located at:
/home/user/R/x86_64-pc-linux-gnu-library/4.0/flexdashboard/rmarkdown/templates/flex_dashboard/resources
add (to the rmd) or look for and change (the .css) to :
<style>
.navbar {
background-color:white;
border-color:blue;
}
.navbar-brand {
color:blue!important;
}
</style>
This will revert the default color scheme of the top navbar
at the moment i dont know a simple YAML - argument solution for this
( but looking into css will gain you much more
versatility along the way, than relying on the YAML options)
I really appreciate the "code_folding" feature in RMarkdown. However, what I really need is to have the code show all the time and toggle the display on the output.
---
title: "test file"
author: "dayne"
date: "June 10, 2016"
output:
html_document:
code_folding: hide
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
Here is a basic example.
```{r}
3 + 4
```
Is there a way to toggle the output rather than the code? The best (but not ideal) solution I have thought of is to add collapse=TRUE to the chunks, but then the code and the output still display at the same time.
Link to the compiled document: http://rpubs.com/daynefiler/188408
TOC:
Full control over which chunks should be folded
Fold all chunks that contain more than one line of code/output
1. Full control over which chunks should be folded
I wanted to have the same functionality as well and did the following:
I created a JavaScript that looks as follows:
$(document).ready(function() {
$chunks = $('.fold');
$chunks.each(function () {
// add button to source code chunks
if ( $(this).hasClass('s') ) {
$('pre.r', this).prepend("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
$('pre.r', this).children('code').attr('class', 'folded');
}
// add button to output chunks
if ( $(this).hasClass('o') ) {
$('pre:not(.r)', this).has('code').prepend("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
$('pre:not(.r)', this).children('code:not(r)').addClass('folded');
// add button to plots
$(this).find('img').wrap('<pre class=\"plot\"></pre>');
$('pre.plot', this).prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
$('pre.plot', this).children('img').addClass('folded');
}
});
// hide all chunks when document is loaded
$('.folded').css('display', 'none')
// function to toggle the visibility
$('.showopt').click(function() {
var label = $(this).html();
if (label.indexOf("Show") >= 0) {
$(this).html(label.replace("Show", "Hide"));
} else {
$(this).html(label.replace("Hide", "Show"));
}
$(this).siblings('code, img').slideToggle('fast', 'swing');
});
});
Since I am no JS crack it might not be perfect, but it does what it is supposed to.
Include it in your Rmd file:
<script src="js/hideOutput.js"></script>
I also wrote some CSS definitions to style the button:
.showopt {
background-color: #004c93;
color: #FFFFFF;
width: 100px;
height: 20px;
text-align: center;
vertical-align: middle !important;
float: right;
font-family: sans-serif;
border-radius: 8px;
}
.showopt:hover {
background-color: #dfe4f2;
color: #004c93;
}
pre.plot {
background-color: white !important;
}
After including both, the JS file and the stylesheet, you can hide chunks by wrapping a div container around them with one of the following classes:
Hide output only
<div class="fold o">
```{r}
...
```
</div>
Hide source code
<div class="fold s">
```{r}
...
```
</div>
Hide both
<div class="fold s o">
```{r}
...
```
</div>
The script detects the type of each chunk (e.g. source code, text output or plot output) and labels the buttons accordingly.
The result looks like this:
2. Fold all chunks that contain more than one line of code/output
Here is a version of the script that adds the folding feature to all chunks that are longer than one line:
$(document).ready(function() {
$plots = $('img.plot');
$chunks = $('pre').has('code');
$chunks = $chunks.filter(function(idx) {
return $(this).children('code').outerHeight(false) > parseInt($(this).css('line-height'));
});
$chunks.each(function () {
if($(this).hasClass('r')) {
$(this).append("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
} else {
$(this).append("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
}
});
$plots.each(function () {
$(this).wrap('<pre class=\"plot\"></pre>');
$(this).parent('pre.plot').prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
});
// hide all chunks when document is loaded
$chunks.children('code').toggle();
$('pre.plot').children('img').toggle();
// function to toggle the visibility
$('.showopt').click(function() {
var label = $(this).html();
if (label.indexOf("Show") >= 0) {
$(this).html(label.replace("Show", "Hide"));
} else {
$(this).html(label.replace("Hide", "Show"));
}
$(this).siblings('code, img').slideToggle('fast', 'swing');
});
});
Just include it with <script src="js/hideAll.js"></script> and you don't need to wrap div containers around your code chunks.
One thing you have to add in your Rmd document though is the following global chunk option:
```{r, echo = F}
knitr::opts_chunk$set(out.extra = 'class="plot"')
```
It is needed to identify graphical output.
How about this lo-fi solution?
<details><summary>Click here</summary>
Some text
```{r code}
# even code
print("Hello world!")
```
</details>
Not mine, but I like it.
A quick an hacky way to toggle a section (not necessarily code):
Enclose the sections to toggle with <div class="toggle"><button>TOGGLE_TEXT</button> and <\div> in your .Rmd file
1. How many users are in the second, but not the first, user table?
<div class="toggle"><button>Solution</button>
```{r}
setdiff(user2, user) %>% nrow()
```
</div>
Put this at the bottom of the .Rmd file (or ideally in a .js file linked to all your pages).
<script>
$(".toggle").click(function() {
$(this).toggleClass("open");
});
</script>
Put this in your .css file (you'll have to play with the height for your button).
.toggle {
height: 1.55em;
overflow-y: hidden;
}
.toggle.open {
height: auto;
}
I straight up copied the javascript from the source of another Rmarkdown document where I set code_folding: show. I saved the javascript as py_code_folding.js and added <script src="py_code_folding.js"></script> to the top of my Rmarkdown document. The only limitation is that I had to hardcode in my javascript whether I want the blocks to be initially shown or hidden.
window.initializePythonCodeFolding = function(show) {
// handlers for show-all and hide all
$("#rmd-show-all-code").click(function() {
$('div.r-code-collapse').each(function() {
$(this).collapse('show');
});
});
$("#rmd-hide-all-code").click(function() {
$('div.r-code-collapse').each(function() {
$(this).collapse('hide');
});
});
// index for unique code element ids
var currentIndex = 10000;
// select all R code blocks
var rCodeBlocks = $('pre.python');
rCodeBlocks.each(function() {
// create a collapsable div to wrap the code in
var div = $('<div class="collapse r-code-collapse"></div>');
if (show)
div.addClass('in');
var id = 'rcode-643E0F36' + currentIndex++;
div.attr('id', id);
$(this).before(div);
$(this).detach().appendTo(div);
// add a show code button right above
var showCodeText = $('<span>' + (show ? 'Hide' : 'Code') + '</span>');
var showCodeButton = $('<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>');
showCodeButton.append(showCodeText);
showCodeButton
.attr('data-toggle', 'collapse')
.attr('data-target', '#' + id)
.attr('aria-expanded', show)
.attr('aria-controls', id);
var buttonRow = $('<div class="row"></div>');
var buttonCol = $('<div class="col-md-12"></div>');
buttonCol.append(showCodeButton);
buttonRow.append(buttonCol);
div.before(buttonRow);
// update state of button on show/hide
div.on('hidden.bs.collapse', function () {
showCodeText.text('Code');
});
div.on('show.bs.collapse', function () {
showCodeText.text('Hide');
});
});
}
$(document).ready(function () {
window.initializePythonCodeFolding("show" === "show");
});
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
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>
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:
I really appreciate the "code_folding" feature in RMarkdown. However, what I really need is to have the code show all the time and toggle the display on the output.
---
title: "test file"
author: "dayne"
date: "June 10, 2016"
output:
html_document:
code_folding: hide
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
Here is a basic example.
```{r}
3 + 4
```
Is there a way to toggle the output rather than the code? The best (but not ideal) solution I have thought of is to add collapse=TRUE to the chunks, but then the code and the output still display at the same time.
Link to the compiled document: http://rpubs.com/daynefiler/188408
TOC:
Full control over which chunks should be folded
Fold all chunks that contain more than one line of code/output
1. Full control over which chunks should be folded
I wanted to have the same functionality as well and did the following:
I created a JavaScript that looks as follows:
$(document).ready(function() {
$chunks = $('.fold');
$chunks.each(function () {
// add button to source code chunks
if ( $(this).hasClass('s') ) {
$('pre.r', this).prepend("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
$('pre.r', this).children('code').attr('class', 'folded');
}
// add button to output chunks
if ( $(this).hasClass('o') ) {
$('pre:not(.r)', this).has('code').prepend("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
$('pre:not(.r)', this).children('code:not(r)').addClass('folded');
// add button to plots
$(this).find('img').wrap('<pre class=\"plot\"></pre>');
$('pre.plot', this).prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
$('pre.plot', this).children('img').addClass('folded');
}
});
// hide all chunks when document is loaded
$('.folded').css('display', 'none')
// function to toggle the visibility
$('.showopt').click(function() {
var label = $(this).html();
if (label.indexOf("Show") >= 0) {
$(this).html(label.replace("Show", "Hide"));
} else {
$(this).html(label.replace("Hide", "Show"));
}
$(this).siblings('code, img').slideToggle('fast', 'swing');
});
});
Since I am no JS crack it might not be perfect, but it does what it is supposed to.
Include it in your Rmd file:
<script src="js/hideOutput.js"></script>
I also wrote some CSS definitions to style the button:
.showopt {
background-color: #004c93;
color: #FFFFFF;
width: 100px;
height: 20px;
text-align: center;
vertical-align: middle !important;
float: right;
font-family: sans-serif;
border-radius: 8px;
}
.showopt:hover {
background-color: #dfe4f2;
color: #004c93;
}
pre.plot {
background-color: white !important;
}
After including both, the JS file and the stylesheet, you can hide chunks by wrapping a div container around them with one of the following classes:
Hide output only
<div class="fold o">
```{r}
...
```
</div>
Hide source code
<div class="fold s">
```{r}
...
```
</div>
Hide both
<div class="fold s o">
```{r}
...
```
</div>
The script detects the type of each chunk (e.g. source code, text output or plot output) and labels the buttons accordingly.
The result looks like this:
2. Fold all chunks that contain more than one line of code/output
Here is a version of the script that adds the folding feature to all chunks that are longer than one line:
$(document).ready(function() {
$plots = $('img.plot');
$chunks = $('pre').has('code');
$chunks = $chunks.filter(function(idx) {
return $(this).children('code').outerHeight(false) > parseInt($(this).css('line-height'));
});
$chunks.each(function () {
if($(this).hasClass('r')) {
$(this).append("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
} else {
$(this).append("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
}
});
$plots.each(function () {
$(this).wrap('<pre class=\"plot\"></pre>');
$(this).parent('pre.plot').prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
});
// hide all chunks when document is loaded
$chunks.children('code').toggle();
$('pre.plot').children('img').toggle();
// function to toggle the visibility
$('.showopt').click(function() {
var label = $(this).html();
if (label.indexOf("Show") >= 0) {
$(this).html(label.replace("Show", "Hide"));
} else {
$(this).html(label.replace("Hide", "Show"));
}
$(this).siblings('code, img').slideToggle('fast', 'swing');
});
});
Just include it with <script src="js/hideAll.js"></script> and you don't need to wrap div containers around your code chunks.
One thing you have to add in your Rmd document though is the following global chunk option:
```{r, echo = F}
knitr::opts_chunk$set(out.extra = 'class="plot"')
```
It is needed to identify graphical output.
How about this lo-fi solution?
<details><summary>Click here</summary>
Some text
```{r code}
# even code
print("Hello world!")
```
</details>
Not mine, but I like it.
A quick an hacky way to toggle a section (not necessarily code):
Enclose the sections to toggle with <div class="toggle"><button>TOGGLE_TEXT</button> and <\div> in your .Rmd file
1. How many users are in the second, but not the first, user table?
<div class="toggle"><button>Solution</button>
```{r}
setdiff(user2, user) %>% nrow()
```
</div>
Put this at the bottom of the .Rmd file (or ideally in a .js file linked to all your pages).
<script>
$(".toggle").click(function() {
$(this).toggleClass("open");
});
</script>
Put this in your .css file (you'll have to play with the height for your button).
.toggle {
height: 1.55em;
overflow-y: hidden;
}
.toggle.open {
height: auto;
}
I straight up copied the javascript from the source of another Rmarkdown document where I set code_folding: show. I saved the javascript as py_code_folding.js and added <script src="py_code_folding.js"></script> to the top of my Rmarkdown document. The only limitation is that I had to hardcode in my javascript whether I want the blocks to be initially shown or hidden.
window.initializePythonCodeFolding = function(show) {
// handlers for show-all and hide all
$("#rmd-show-all-code").click(function() {
$('div.r-code-collapse').each(function() {
$(this).collapse('show');
});
});
$("#rmd-hide-all-code").click(function() {
$('div.r-code-collapse').each(function() {
$(this).collapse('hide');
});
});
// index for unique code element ids
var currentIndex = 10000;
// select all R code blocks
var rCodeBlocks = $('pre.python');
rCodeBlocks.each(function() {
// create a collapsable div to wrap the code in
var div = $('<div class="collapse r-code-collapse"></div>');
if (show)
div.addClass('in');
var id = 'rcode-643E0F36' + currentIndex++;
div.attr('id', id);
$(this).before(div);
$(this).detach().appendTo(div);
// add a show code button right above
var showCodeText = $('<span>' + (show ? 'Hide' : 'Code') + '</span>');
var showCodeButton = $('<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>');
showCodeButton.append(showCodeText);
showCodeButton
.attr('data-toggle', 'collapse')
.attr('data-target', '#' + id)
.attr('aria-expanded', show)
.attr('aria-controls', id);
var buttonRow = $('<div class="row"></div>');
var buttonCol = $('<div class="col-md-12"></div>');
buttonCol.append(showCodeButton);
buttonRow.append(buttonCol);
div.before(buttonRow);
// update state of button on show/hide
div.on('hidden.bs.collapse', function () {
showCodeText.text('Code');
});
div.on('show.bs.collapse', function () {
showCodeText.text('Hide');
});
});
}
$(document).ready(function () {
window.initializePythonCodeFolding("show" === "show");
});