Presentations with R Markdown - Part 3: Changing font colors

Introduction

This is Part 3 of a series on how to construct presentations using R Markdown.

In the previous two articles (article1 and article 2), I discussed how to construct a presentation using R Markdown and how to add a new slide to a presentation. I also discussed how to have bullets face in and out from different directions using simple special effects.

I used my recent presentation at UC Irvine as a template. Here is my HTML presentation that I constructed using revealjs. You can also view my presentation below:

In part 3, I share some code on how to change the font color in a presentation using R Markdown. I also provide some code on how to add simple special effects (e.g., fade-in) when transitioning font colors. This tool will help to enhance and highlight specific text during your presentation.

Objectives

• Change font color
• Transition font color
• Fade-in bullet and transition font color

Change font color

In revealjs, you can assign a font color to the text. This has the added value of highlighting certain words to give it gravitas.

Assigning blue to the font.

Transition font color for specific words

You can also have a font’s color change on a slide using transitions. The <span class> syntax is an inline container used to select a specific text in a fragment. For instance, the following code <span class="fragment highlight-red"> Mentors </span> denotes that the text Mentors will be highlighted red.

Transitioning font colors for specific words.

Combining bullets that fade-in and then transition font colors

For a more dramatic flare, you can have the bullet fade-in and then have the font transition to a different color to give it more weight. We start this with the <p class="fragment fade-up"> syntax to denote that the bullet will appear via a fade-up effect. This is followed by the <span class> syntax, which highlights a text in the fragment and assigns it a color. We can perform this part for various other words in the bullet. Lastly, we end this code chunk with </p>.

Bullet fades-in, then transition font colors for specific words.

Conclusion

Highlighting words using different font colors can enhance a presentation. This article provides simple codes that you can use to change the color of texts in a presentation and incorporate special effects such as fade-in and transitions.

Acknowledgement

I learned how to start building HTML presentations using the following resources:

• revealjs website
• Tim Mastny’s website to help embed a presentation into an R Markdown file.
• revealjs code cheat sheet

Work in progress

This is a work in progress, and I’ll likely make updates as I learn more. I created this tutorial to help my future self remember how to construct an HTML presentation.

This is for educational purposes only.