slides.md

title	icon	layout
Slide page	person-chalkboard	Slide

@slidestart

Slide Demo

A simple slide demo and useful hints.

By Mr.Hope. Please scroll mouse wheel down to the next slide

---

Marking Slides

👇

--

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.

--

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(\theta_0,\theta_1) = \sum_{i=0} $$

--

Markdown

You can use all kinds of markup in slides.

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

---

Layout

--

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.

--

Layout

Background

Custom background by adding data-background attribute to slide.

---

Fragment

--

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

Fade in > Turn red > Fade out

--

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

Transition can be changed by setting the transition config option globally or data-transition attribute on 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

--

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);

--

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.

---

The End

@slideend