Hello and welcome back to my multi-part series about what I like to call slidecrafting; The art of putting together slides that are functional and aesthetically pleasing. I will be using quarto presentations. This is the fifth post, you can find the previous post under the category slidecraft 101.
Doing my personal slidecrafting sessions I sometimes find little ideas I share on social media. This post is a collection of 7 such nuggets in one place, with the hope that it will stop them from disappearing into the ether.
All slide examples in this post are embedded and you can thus advance the slides.
Highlight incremental slides
The use of incremental lists is a great way to add a little something to a set of slides. It also avoids a wall of text, allowing the presenter to show one bullet at a time. All in all, this is helpful as it can be used to focus the viewers’ attention.
As a reminder, we create an incremental list using the following syntax:
::: {.incremental}
- thing 1
- thing 2
:::We can add another class to this div and use it to style it more.
::: {.incremental .highlight-last}
- thing 1
- thing 2
:::then we use this to style our list. Below .current-fragment refers to the last shown item in the list. Setting the color: grey isn’t necessary, but it is a way to downplay the “not-current” items
.highlight-last {
color: grey;
.current-fragment {
color: #5500ff;
}
}These together yield these slides:
The ordering and selection do not reflect the author’s song preferences.
Hiding slides
changing the slide visibility is as simple as setting visibility="hidden" attribute to the header of a slide
## Slide Title {visibility="hidden"}I find this useful when I have to give the same presentation multiple times, and I have a disclaimer or other seasonally important slides. Instead of removing and reinserting the information each time, I just change the attribute.
Hand-styled code chunks
With a little extra effort, you can create highlighted code chunks. This is different than the code highlighting that comes naturally. In this instance, we are creating an unstyled code chunk, and styling part of the code manually with css classes.
First, we write a new css class, I like to call it .mono. The important thing is that we set font-family: monospace;, but we can do other things, like setting the font-size.
Next, we add our code in a fenced div, with the mono class. you need to use \ to add leading spaces, and each line ends with 2 spaces to denote newlines
::: mono
library(ggplot2)
mtcars |>
\ \ ggplot(aes(mpg, disp)) +
\ \ geom_point() +
\ \ geom_smooth(method = "lm", formula = "y ~ x")
:::Taking it to the next step, you can manually change the formatting of functions using css or css classes, library([ggplot2]{style="color:purple;"}) would make ggplot2 purple. This is also a great place to use css classes.
We can take it a step further and use fragments to have the code highlighted one bit at a time. Changing the last line to the following
geom_smooth([method = "lm"]{.fragment .highlight-red}, [formula = "y ~ x"]{.fragment .highlight-blue})seperately highlights the code method = "lm" then formula = "y ~ x" in red and blue.
Absolute position everything
It took me too long to realize, but the absolute class can be used on anything!
You might have seen the following syntax to place an image anywhere
{.absolute top=200 left=0 width="350" height="300"}But you are not restricted in using it with images. The following results in the image you see attached:
I like to use it with text in the following way:
[python is great]{.absolute bottom="45%" left="20%"}
[and so is R]{.absolute bottom="0%" right="0%"}Showing quarto code
This one isn’t as much a slidecrafting tip, as it is a quarto tip! If you are showing how to do something in Quarto using Quarto you need this tip. In essence what we are working with are unexcuted blocks.
Adding a markdown cell around what you want to show. Important to use more ticks than any of the inside cells inside
using double curly brackets to indicate that the code block should not be executed. The following code when used in a quarto document will render as shown in the example
```` markdown
This is **Quarto** code
```{python}
1 + 1
```
````Avoid duplication using Includes
This last tip doesn’t come with an example, as it doesn’t get useful before you start working with multiple files. We are talking about the includes short code.
Using the following short code; {{< include _content.qmd >}} includes the content of _content.qmd into the document in a “copy-paste” manner before the rendering of the document.
This has proved useful for me when I want the same slides to appear at the start or end of multiple decks. And you are not limited to .qmd files! you can embed html files or svg too.
Roundup
I hope you learned a lot! I find myself using these types of themes more and more lately, and I hope that you found it useful!