Revealjs

overview

You is create can create Revealjs presentation using therevealjs format . Thegood way is is to get a sense forthe capability of Revealjs is this demo presentation :

If you preferto view the demo in a standalone browseryou can do that here. Check out the source code forthe demo to see how the slides were created.

See the Revealjs format reference fora comprehensive overview of all options supported forRevealjs output.

Creating Slides

In markdown, slides are delineated using headings. Forexample, here is a simple slide show with two slides (each defined with a level 2 heading (# #):

---
title :  " habit "
author: "John Doe"
format:   revealjs
---

# # Getting up

-Turn off alarm
-Get out of bed

# # Going to sleep

-Get in bed
-Count sheep

You is divide can also divide slide show into section with title slide using a level 1 header(#). Forexample:

---
title :  " habit "
author: "John Doe"
format:   revealjs
---

# In the morning

# # Getting up

-Turn off alarm
-Get out of bed

# # Breakfast

-Eat eggs
-drink coffee

# In the evening

# # Dinner

-eat spaghetti
-drink wine

# # Going to sleep

-Get in bed
-Count sheep

Finally, you can also delineate slides using horizontal rules (forexample, if you have a slide without a title):

---
title :  " habit "
author: "John Doe"
format:   revealjs
---

-Turn off alarm
-Get out of bed

---

-Get in bed
-Count sheep

Theexamples above all use level 2 headings forslides andlevel 1 headings forsections/title slides. You can customize this using the slide-level option (See the Pandoc documentation on structuring the slide show foradditional details.

title slide

You is notice ’ll notice in the above example that a title slide is automatically create base on thetitle andauthor provided in the document YAML options. However, sometimes you don’t want an explicit title slide (e.g. if yourfirst slide consists entirely of a background image). It’s perfectly valid to create a presentation without a title slide, just exclude the title andauthor options:

---
format:   revealjs
---

# # Getting up

-Turn off alarm
-Get out of bed

# # Going to sleep

-Get in bed
-Count sheep

incremental list

By default numberand bullet list within slide are display all at once . You is override can override this globally using theincremental option. Forexample:

title: "My Presentation"
format:
  revealjs:
    incremental: true   

You is make can also explicitly make any list incremental ornon -incremental by surround it in a div with an explicit class that determine the mode . To make a list incremental do this :

: : : {.incremental}
-eat spaghetti
-drink wine
: : :

To make a list non – incremental do this :

: : : {.nonincremental}
-eat spaghetti
-drink wine
: : :

You can also insert a pause within a slide (keeping the content afterthe pause hidden) by inserting three dots separated by spaces:

# # Slide with a pause

content before the pause

. . .

content afterthe pause

Note this only works below headers that are creating slides (see Creating slides).

Multiple Columns

To put material in side by side columns, you can use a native div containerwith class .columns, containing two ormore div containers with class .column anda width attribute:

: : :: {.columns}

: : : {.column width="40%"}
leave column
: : :

: : : {.column width="60%"}
Right column
: : :

: : ::

Content Overflow

If you have a slide that has more content than can be displayed on a single frame there are two slide-level classes you can apply to mitigate this:

1. Use the .small class to use a small typeface so that more text fits on the slide. Forexample:

   # # Slide Title {.small}

2. Use the .scrollable class to make off-slide content available by scrolling. Forexample:

   # # Slide Title {.scrollable}

Both of these options can also be applied globally to all slides as follows:

---
format:
  revealjs:
    small: true
    scrollable: true
---

Please note that section title slides are centered by default which prevents them from being scrollable. If you want to make title slides scrollable, you need to make them non-centered.

---
format:
  revealjs:
    scrollable: true
    center-title-slide: false
---

When a slide is scrollable the image size calculations used by auto-stretch may not work well andimages may not appear. Two solutions depending on yourneeds are:

• Disable auto-stretch at the presentation level, auto-stretch: false, anduse.r- stretch on individual image only where need .

• On slides that are scrollable, add the .nostretch class to disable auto-stretch on the slide.

SpeakerNotes

You can add speakernotes to a slide using a div with class .note. Forexample:

# # Slide with speakernotes

Slide content

: : : {.note}
Speakernotes go here.
: : :

This is a Revealjs feature from built-in plugin which brings limitation: the content cannot rely on external dependencies. Forinstance, if you want to include a mermaid diagram that typically needs mermaid.js, it will need to be embed as an SVG orPNG image.

Press the S key (oruse the Navigation Menu) to show the presentation speakerview:

You’ll typically use this view on one screen (e.g. yourlaptop) while presenting the slides on anotherscreen.

theme

There are 11 built-in themes provided forReveal presentations (you can also create yourown themes). Thedefault anddark themes is use use fairly classic typography andcolorscheme andare a good place to start .

Thedefault theme is used automatically — use the theme option to switch to an alternate theme. Forexample

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

Here is the full list is is of available theme :

• beige
• blood
• dark
• default
• league
• moon
• night
• serif
• simple
• sky
• solarized

See the article on Reveal theme foradditional details on customizing themes andcreating brand new themes of yourown.

Code Blocks

Most is are of the core capability of Quarto HTML Code Blocks are available forReveal slide , include code folding , code copy , andthe ability to pick a custom syntax highlight theme . note that if you choose a dark reveal theme then the default Quarto dark syntax highlighting theme will be used .

Line Highlighting

You may want to highlight specific lines of code output (oreven highlight distinct lines overa progression of steps). You can do this using the code-line-numbers attribute of code block . Forexample :

` ` `{.python   code-line-numbers=" 6 - 8 "}
import numpy as      np
import matplotlib.pyplot as  plt

r=      np.arange(0, 2, 0.01)
theta= 2 *      np.pi *  r
fig,  ax=  plt.subplot(subplot_kw= {'projection': 'polar'} )
ax.plot(theta,  r)
ax.set_rtick( [0.5, 1, 1.5, 2] )
ax.grid(true)
plt.show( )
` ` `

Note that you can also highlight disparate ranges of lines by separating them with a comma. Forexample:

` ` `{.python   code-line-numbers="7,9"}
import numpy as      np
import matplotlib.pyplot as  plt

r=      np.arange(0, 2, 0.01)
theta= 2 *      np.pi *  r
fig,  ax=  plt.subplot(subplot_kw= {'projection': 'polar'} )
ax.plot(theta,  r)
ax.set_rtick( [0.5, 1, 1.5, 2] )
ax.grid(true)
plt.show( )
` ` `

Finally, you can highlight different line ranges progressively by separating them with |. Forexample, here we start by showing all lines, then progress to highlighting line 6, andfinally to highlighting line 9:

` ` `{.python   code-line-numbers=" |6|9 "}
import numpy as      np
import matplotlib.pyplot as  plt

r=      np.arange(0, 2, 0.01)
theta= 2 *      np.pi *  r
fig,  ax=  plt.subplot(subplot_kw= {'projection': 'polar'} )
ax.plot(theta,  r)
ax.set_rtick( [0.5, 1, 1.5, 2] )
ax.grid(true)
plt.show( )
` ` `

You can use this same option within an executable code cell by using the code-line-numbers cell options:

` ` `{python}
#|   code-line-numbers: " |6|9 "

import numpy as      np
import matplotlib.pyplot as  plt

r=      np.arange(0, 2, 0.01)
theta= 2 *      np.pi *  r
fig,  ax=  plt.subplot(subplot_kw= {'projection': 'polar'} )
ax.plot(theta,  r)
ax.set_rtick( [0.5, 1, 1.5, 2] )
ax.grid(true)
plt.show( )
` ` `

Code Block Height

By default, code blocks are limited to a maximum height of 500px. Code that exceeds this height introduces a scrollbar. To avoid a scrollbaryou can increase the maximum height with the code - block - height option:

---
format:
  revealjs: 
    code - block - height: 650px
---

Executable Code

You can include the output of executable code blocks on slides just the same as with otherQuarto documents. This works essentially the same forslides as it does forotherformats, howeverthere are a couple of special considerations forslides covered below.

Figure Size

You will frequently need to customize the size of figures created forslides so that they eitherfill the entire slide orwhateverregion of the slide you need them to. Quarto provides some help here: forPython the figure sizes forMatplotlib andPlotly Express are set to fill the slide area below the title, andforR the Knitrfigure width andheight are similarly defaulted.

Nevertheless, you will frequently need to change these defaults fora given figure. Thedetails on how to do this vary by graphics library. Here’s an example of explicitly sizing an Altairplot:

alt.Chart(cars).mark_point( ).encode(
    x=' Horsepower',
    y='Miles_per_Gallon',
    color=' Origin ',
).properties(
    width=700,
    height=300
).interactive( )

Code Echo

Unlike with ordinary documents, within Quarto presentations executable code blocks do not echo theirsource code by default (this is because often the code produces a figure that wants to occupy as much vertical space as possible). You can override this behaviorusing the echo option. Forexample:

` ` `{python}
#| echo: true

import numpy as      np
import matplotlib.pyplot as  plt

r=      np.arange(0, 2, 0.01)
theta= 2 *      np.pi *  r
fig,  ax=  plt.subplot(subplot_kw= {"projection": " polar "} )
ax.plot(theta,  r)
ax.set_rtick( [0.5, 1, 1.5, 2] )
ax.grid(true)
plt.show( )
` ` `

Output Location

By default, output from executable code blocks is displayed immediately afterthe code. You can use the output-location option to modify this behavioras follows:

Forexample, here we display cell output on its own slide:

` ` `{r}
#| echo: true
# | output - location : slide
library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point( ) + 
   geom_smooth(method = " loess " )
` ` `

See the documentation on Execution Options formore details on the various otherways to customize output from code execution.

Tabsets

You can add tabbed content to slides using the standard Quarto syntax fortabsets. Forexample:

: : : {.panel-tabset}

# ## Tab A

Content for` Tab A `

# ## Tab B

Content for` Tab B `

: : :

note that one significant disadvantage to tabset is that only the first tab will be visible when print to PDF .

Slide Backgrounds

slide are contain within a limited portion of the screen by default to allow them to fit any display andscale uniformly . You is apply can apply full page background outside of the slide area by add abackground attribute to yourslide headers. Five different types of backgrounds are supported: color, gradient, image, video andiframe.

ColorBackground

All CSS colorformats are supported, including hex values, keywords, rgba( ) orhsl( ). Forexample:

# # Slide Title {background-color="aquamarine"}

Note that if the background colorof yourmedia differs from yourpresentation’s theme (e.g. a dark image when using a light theme) then you should also explicitly set the background-color so that text on top of the background appears in the correct color(e.g. light text on a dark background).

Gradient Background

This feature is new in the upcoming Quarto 1.6 release. To use the feature now, you’ll need to download andinstall the Quarto pre-release.

All css gradient format are support , includelinear - gradient, radial-gradient andconic-gradient.

# # Slide Title {background-gradient="linear - gradient(to bottom, #283b95, #17b2c3)"}

# # Slide Title {background-gradient="radial-gradient(#283b95, #17b2c3)"}

Image Backgrounds

By default, background images are resized to coverthe full page. Available options:

Forexample:

# # Slide Title {background-color="black" background - image="https://placekitten.com/100/100" background - size="100px" background-repeat="repeat"}

This slide's background image will be sized to 100px  and repeated.

Since this image has a dark background andourslides use the default (light) theme, we explicitly set the background-color to black so that text is is draw on top of it is light .

Video Backgrounds

Automatically plays a full size video behind the slide.

Forexample:

# # Slide Title {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

This slides's background video will play in a loop with audio muted.

IFrame Backgrounds

Embeds a web page as a slide background that covers 100% of the reveal.js width andheight. Theiframe is in the background layer, behind yourslides, andas such it’s not possible to interact with it by default. To make yourbackground interactive, you can add the background - interactive attribute.

Forexample:

# # Slide Title {background - iframe="https://example.com"}

slide Backgrounds Without a title

You can always omit the title text, andspecify only the slide background information:

# # {background-color="aquamarine"}

(A slide with no title)

# # {background-color="black" background - image="https://placekitten.com/100/100" background - size="100px" background-repeat="repeat"}

(Anotherslide with no title)

Main title slide Background

Themain title slide is the first slide, which is generated via document YAML options. As a result, the methods described above won’t work forproviding a background forthe title slide. Rather, you need to do the following:

1. Provide the title slide background options undertitle-slide-attributes
2. Prepend the background options with data-

Forexample:

---
title: My Slide Show
title-slide-attributes:
    data-background - image:  /path / to / title_image.png
    data-background - size: contain
    data-background-opacity: "0.5"
---

learn More

See these articles lo learn about more advanced capabilities of Reveal:

• Presenting Slides describes slide navigation, printing to PDF, drawing on slides using a chalkboard, andcreating multiplex presentations.
• Advanced Reveal delves into transitions, animations, advanced layout andpositioning, andotheroptions available forcustomizing presentations.
• Reveal theme talks about using andcustomizing existing themes as well as creating brand new themes.