QPres

Quarto

Quarto

This is a presentation about:

• basic presentation slides
• themed presentation

Theme Options

add these to yaml section theme: dark

• beige = old book bg, white font, brown progress bar
• blood = black bg, white font, red progress bar
• dark = black bg, white font, blue progress bar
• default
• league = black gradient bg, white font, blue progress bar
• moon = teal bg, white font, blue progress bar
• night = black bg, white font, yellow progress bar
• serif = light bg, black font, grey progress bar
• simple = light bg, black font, blue progress bar
• sky = light blue gradient bg, black font, teal progress bar
• solarized = beige bg, teal font, blue progress bar

Slide backgrounds

Let your background slide with CSS, rgb(), #hex or hsl()

• add slide bg color {background-color="purple"}

Image background

another option is

Image background tiled {background-image="image.png" background-size="100px" 
background-repeat="repeat"}

Video background

the video is on a loop muted {background-video='video.mp4'}

believe it is only .mp4 files that work

Bullets

When you click the Render button a document will be generated that includes:

• Content authored with markdown
• Output from executable code

Code

When you click the Render button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

[1] 3

# A tibble: 6 × 14
  name      height  mass hair_color skin_color eye_color birth_year sex   gender
  <chr>      <int> <dbl> <chr>      <chr>      <chr>          <dbl> <chr> <chr> 
1 Luke Sky…    172    77 blond      fair       blue            19   male  mascu…
2 C-3PO        167    75 <NA>       gold       yellow         112   none  mascu…
3 R2-D2         96    32 <NA>       white, bl… red             33   none  mascu…
4 Darth Va…    202   136 none       white      yellow          41.9 male  mascu…
5 Leia Org…    150    49 brown      light      brown           19   fema… femin…
6 Owen Lars    178   120 brown, gr… light      blue            52   male  mascu…
# … with 5 more variables: homeworld <chr>, species <chr>, films <list>,
#   vehicles <list>, starships <list>

this has no # header

• level 1 alert

• level 2 alert

4 dashes equal new slide page

you can explicitly list increment/ decrement by using a div with a class like

:::{.incremental}

- bullet point

:::

• add incremental: true after/ underneath

• format: revealjs: in the yaml top section

pause, for effect

you can pause the …

the content, you know

• it takes 4 :::: for a new page
• it takes 3 ::: for column section

Columns left | right

Left column

lorem ipsum yadda

right column

lorem ipsum squareroot sum

Got too much content?

use the class ## Small Title {.smaller}

need to add smaller: true in yaml section

Scrollable Title

can you find scroll 10 ?

• scroll 1
• scroll 2
• scroll 3
• scroll 4
• scroll 5
• scroll 6
• scroll 7
• scroll 8
• scroll 9
• scroll 10 you won!

need to add scrollable: true in yaml section

Speaker Notes

Oh speaker, here are your notes. Press the S key for speaker view

note: these are notes about the speaker notes. This section takes 3 :::

Footnote

• The Death Star is under construction¹
• if you want footnotes included
• add reference-location: document in the yaml

Footnotes in Star Wars

1. the third Death Star

Footer & Logo

Globally add a footer & logo to all slides

• just add
• logo: mylogo.png
• footer: "footer text"
• in the yaml section

Custom Footer

you can have customized footers !

::: footer
  this is a special request footer
:::

Highlighters

You have special code that needs some focus on, then use code-line-numbers in the {} code block.

Python Code, this highlight the random range function call, this argument can take a range “4-5” if you wanted.

import numpy as np

r = np.arange(1,5, 0.5)
r

Put it on my Tab

You can add tabbed content to slides with tabsets

• Tab A
• Tab B

content for Tab A

I have a secret to tell, go to Tab B

content for Tab B

Tab A is only tab visible when in pdf format

Print to pdf

optional print arguments in yaml

• show-notes: false
• slide-number: true
• pdf-max-pages-per-slide
• pdf-separate-fragments

This works in Chrome

• Navigation Menu
• open browser print dialog
• change the destination to save as PDF
• change layout to landscape
• change the margins to none
• enable background graphics
• click save

chalkboard

Toggle canvas C

Toggle chalkboard B

reset drawings backspace

clear drawings del

download drawings D

cycle colors fwd/back X/Y

multiplex

rendering slides outputs presentation.html and presentation-speaker.html

requirement is having a url . Having your own multiplex id and secret go to multiplex-glitch

Animation 1.0

Level 1

Level 1

Level 2

Animate !

part 1

Animating content

Animate !

part 2

Animating content

Code Animation

# load the library which has Star Wars dataset

Star Wars dataset

# load the library which has Star Wars dataset
dplyr::starwars

Fragments

the details for slide animations are in the section called Fragments

Fade in > turn green > strike > fade out

revealjs plugins

if you want to add more revealjs plugins beyond the popular ones included in Quarto go to revealjs plugins

and to add them

format: 
  revealjs:
    revealjs-plugins:
      - myplugin
      

knitr::kable

species	n	mean_heigth	mean_mass
Human	35	177	83
Droid	6	131	70
Gungan	3	209	74
Kaminoan	2	221	88
Mirialan	2	168	53
Twi’lek	2	179	55
Wookiee	2	231	124
Zabrak	2	173	80

DT::datatable

gt::gt()

species	n	mean_heigth	mean_mass
Human	35	177	83
Droid	6	131	70
Gungan	3	209	74
Kaminoan	2	221	88
Mirialan	2	168	53
Twi'lek	2	179	55
Wookiee	2	231	124
Zabrak	2	173	80

reactable::reactable