@slidestart

# Slide Demo

A simple slide demo and useful hints.

By Mr.Hope. Please scroll mousewheel down to the next slide

# Marking Slides

👇

--

# Marking Slides

Use --- to mark horizontal slides

Use -- to sperate 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, strikethrough text and a link (opens new window), 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;
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 unstandard Markdown syntax is not supported.

# Layout

--

# Layout

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

--

# Layout

Logo

👆 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

Cutom 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

# Mutiple 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 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

--

# 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);
1
2
3
4

--

# 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