Reveal.yaml Demo Slide

Author: Yuan Chang

Scroll right β†’ to see the examples.

Scroll down ↓ to see an auto-generated outline.

πŸ— Repository

πŸ“– Documentation

🎞 Demo Source

β˜• Reveal.js

πŸ“– Outline

Reveal.yaml Demo Slide

Hello My Friends!

Longer title become smaller~

Here comes the THRID LINE!!


This is actually the "Fit" page, check the table of content!

title-hidden: Fit
fit:
  - Hello My Friends!
  - Longer title become smaller~
  - Here comes the THRID LINE!!
  - ---
  - This is actually the "Fit" page, check the table of content!

πŸ“– title-hidden πŸ“– fit

Fit

Title Only

This title is invisible in the table of content. Same as its section.

title-only: Title Only

πŸ“– title-only

Markdown

Something important.

item 1item 2
AB
import sys
print(sys.path)
for i in range(10):
    print("Hello World!")
doc: |
  *Something* **important**.

  | item 1 | item 2 |
  |:------:|:------:|
  | A | B |

  ```python[1-2]
  import sys
  print(sys.path)
  for i in range(10):
      print("Hello World!")
  ```

  + Item
  + [Next page](#/doc-src)

πŸ“– doc

Markdown

Images

Kitten 🐱
Kitten 🐱

Multiple Images

Kitten 1
Kitten 1
Kitten 2
Kitten 2
Images

Lay with Images

Images
img:
  label: Kitten 🐱
  src: https://placekitten.com/600/400

Multiple images will be placed horizontally.

img:
  - label: Kitten 1
    src: https://placekitten.com/700/500
    pop: true
  - label: Kitten 2
    src: https://placekitten.com/800/500
    pop: true

Laid images will be placed at the same center.

lay-img:
  - src: https://placekitten.com/450/450
    frag: fade-right
  - src: https://placekitten.com/600/300
    frag: fade-left

πŸ“– img πŸ“– lay-img

Images

Video

The videos can be placed as same as the images.

video:
  - width: 320
    height: 240
    src: https://www.w3schools.com/html/movie.mp4
  - src: https://www.w3schools.com/html/movie.mp4
    controls: false

πŸ“– video

Maths

Inline math text $x_a^*$ and $x_b^*$.

doc: Inline math text $x_a^\*$ and $x_b^\*$.
math: |
  \small\begin{aligned}
  \min_{x_1, x_2}&f(x)
  \\
  \text{s.t.}\,&b(x) \le 0
  \\
  &c(x) = 0
  \end{aligned}

πŸ“– math

\[\small\begin{aligned} \min_{x_1, x_2}&f(x) \\ \text{s.t.}\,&b(x) \le 0 \\ &c(x) = 0 \end{aligned} \]

Background Color & Transition

Override global setting, use a single color background.

trans: convex-in convex-out
background: rgb(70, 70, 255)

🐳🐳🐳

Local Background & Style Options

Override global setting, use a local background.

class: left-align
bg-trans: fade-in fade-out
background:
  src: https://placekitten.com/800/800
  size: 25%
  opacity: 0.5

This page has a β€œleft-align” class, and β€œtext-align: left” has been set for β€œ.left-align p”. So all the pargraphs are left aligned.

β€œIdβ€œs are also work, but the page id will be replaced.

.left-align p {
    text-align: left;
}

πŸ“– style πŸ“– id πŸ“– class πŸ“– background (global) πŸ“– background

πŸ“– trans πŸ“– bg-trans

Background Color & Transition

Layout

h-stack:
  - doc: |
      *Data types*
      + sturct
      + enum
      + union
  - math: \small \frac{-b\pm \sqrt{b^2 - 4ac}}{2a}
  - img: { src: https://placekitten.com/600/600 }

πŸ“– h-stack πŸ“– v-stack

Data types

  • sturct
  • enum
  • union
\[\small \frac{-b\pm \sqrt{b^2 - 4ac}}{2a}\]

Nested Layout

h-stack:
  - v-stack:
    - h-stack:
      - doc: Left Top Left
      - doc: Left Top Right
    - doc: Left Bottom
  - v-stack-border:
    - doc: Right Top
    - h-stack-border:
      - doc: Right Bottom Left
      - doc: Right Bottom Right

πŸ“– h-stack-border πŸ“– v-stack-border

Left Top Left

Left Top Right

Left Bottom

Right Top

Right Bottom Left

Right Bottom Right

Layout

Auto Animate

Auto animation is suggested for the most simple cases.

Enable this option for two continuous slides, the animation will be generated automatically.

title: Auto Animate
auto-animate: true

πŸ“– auto-animate

Move

Auto Animate

title: Auto Animate
auto-animate: true

πŸ“– auto-animate

Move

Smoothly

Auto Animate

Fragment

The index of fragment is the order of the animation.

The blank represents normal class="framgment" effect.

h-stack:
  - doc: AAA
    math: f(x)
    frag: [ { doc: ~, math: ~ } ]  # one action
  - doc: BBB
    math: g(y)
    frag: [ { doc: ~ }, { math: ~ } ]  # two action
  - doc: CCC
    math: h(z)
    frag: [ { math: ~ } ]  # one element

πŸ“– frag

AAA

\[f(x)\]

BBB

\[g(y)\]

CCC

\[h(z)\]
Auto Animate

Fragment with Multiple docs

v-stack:
  - doc: Since there is only one `doc`,
    frag: &frag [ { doc: ~ } ]
  - doc: so it may splitted by `v-stack`.
    frag: *frag
  - doc: The anchors can be used on `frag` array.
    frag: *frag

Since there is only one doc,

so it may splited by v-stack.

The anchors can be used on frag array.

Auto Animate

Note

Press β€œs” key to open speaker’s view.

note: |
  Note text here!

  There are also have **markdown** *syntax*!

πŸ“– note

Anchors

YAML anchor can be used in the content data.

Anchors will be only resolve twice,

which not allow to serializing self-loop in anchor chain.

h-stack-border:
  - &stack
    v-stack:
    - &map
      doc: &doc Same content here!
    - doc: *doc
    - *map
  - *stack

Same content here!

Same content here!

Same content here!

Same content here!

Same content here!

Same content here!

Third-party Plugins

The third-party plugins can be loaded from metadata.

plugin:
  RevealNotes:
    - plugin/notes/notes.js

πŸ“– plugin

Will be converted to:

<script src="/plugin/notes/notes.js"></script>
Reveal.initialize({
  plugins: [..., RevealNotes],
  ...
});

Example