Marking Slides

Use --- to mark horizontal slides

Use -- to separate vertical slides in a horizontal slide.

Use <!-- .slide: ... --> to add attributes to slide

Use <!-- .element: ... --> to add attributes to the previous html element

Markdown

You can use all kinds of markup in slides.

This is a H3

Headings will transform to UPPERCASE by default.

Here is paragraph with some bold, italic, strike-through text and a link, and it can auto break itself so you don’t need to worry the length.

Markdown

You can use all kinds of markup in slides.

List is inline-block by default.

• Item
• Item
• Item

1. Item 1
2. Item 2
3. Item 3

Markdown

You can use all kinds of markup in slides.

Code block will get auto highlight if you enable highlight plugin.

const a = 1;

Markdown

You can use all kinds of markup in slides.

You can also write math equation using tex syntax if you enable math plugin.

J(θ0,θ1)=∑i=0

Markdown

You can use all kinds of markup in slides.

⚠Note: Table, hr and other nonstandard Markdown syntax is not supported.

Layout

👆 The r-fit-text class makes text as large as possible without overflowing the slide.

Layout

👆 The r-stretch class helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide.

Fragment

Fragments are used to highlight or incrementally reveal individual elements on a slide.

Add fragment and animation class to element.

Fragment

Animation class

• fade-in

• fade-out

• fade-up

• fade-down

• fade-left

• fade-right

• fade-in-then-out

• fade-in-then-semi-out

Fragment

Animation class

• grow

• shrink

• strike

• highlight-red

• highlight-green

• highlight-blue

• highlight-current-red

• highlight-current-green

• highlight-current-blue

Fragment

Multiple fragments

Multiple fragments can be applied to the same element sequentially by wrapping it

Fragment

Order

Order can be changed using the data-fragment-index attribute.

Multiple elements can appear at the same index.

• Appears last

• Appears second

• Appears first

• Appears second

Transition

Transition can be changed by setting the transition config option globally or data-transition attribute on specific slide.

Possible values:

• none
• fade
• slide

• convex
• concave
• zoom

Transition

Auto animate

data-auto-animate can be added on nearby slides to make an animation on unchanged elements.

Functions

Code

By enabling highlight plugin, you can highlight code blocks.

You can use [a-b|c-d] syntax to highlight lines by steps.

let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);

Functions

Overview

Press Esc or O to enter overview mode when the presentation is active

Functions

Full Screen

Press F or F11 to enter fullscreen when the presentation is active

Functions

Zoom

Hold down the alt key (ctrl in Linux) and click on any element to zoom towards it.

Click again to zoom back out.