Welcome to Slides

Features

Efficiently write slides in Markdown
3-in-1: Create, Present, and Publish your slides
Supports speaker notes
Mobile friendly slides

Controls

Next: Right Arrow or Space
Previous: Left Arrow
Start: Home
Finish: End
Overview: Esc
Speaker notes: S
Fullscreen: F
Zoom: Alt + Click
PDF Export: E

Code Highlighting

Inline code: variable

Code block:

<span style="display:flex;"><span>porridge <span style="color:#f92672">=</span> <span style="color:#e6db74">"blueberry"</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> porridge <span style="color:#f92672">==</span> <span style="color:#e6db74">"blueberry"</span>:
</span></span><span style="display:flex;"><span>  print(<span style="color:#e6db74">"Eating..."</span>)
</span></span>

Math

In-line math: $x + y = z$

Block math:

$$ f\left( x \right) = ;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}} $$

Fragments

Make content appear incrementally

{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} **Two** {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}

Press Space to play!

A fragment can accept two optional parameters:

class: use a custom style (requires definition in custom CSS)
weight: sets the order in which a fragment appears

Speaker Notes

Add speaker notes to your presentation

<span style="display:flex;"><span>{{% speaker_note %}}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> Only the speaker can read these notes
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> Press <span style="color:#e6db74">`S`</span> key to view
</span></span><span style="display:flex;"><span>{{% /speaker_note %}}
</span></span>

Press the S key to view the speaker notes!

Themes

black: Black background, white text, blue links (default)
white: White background, black text, blue links
league: Gray background, white text, blue links
beige: Beige background, dark text, brown links
sky: Blue background, thin dark text, blue links

night: Black background, thick white text, orange links
serif: Cappuccino background, gray text, brown links
simple: White background, black text, blue links
solarized: Cream-colored background, dark green text, blue links

Custom Slide

Customize the slide style and background

<span style="display:flex;"><span>{{< <span style="color:#f92672">slide</span> <span style="color:#a6e22e">background-image</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/img/boards.jpg"</span> >}}
</span></span><span style="display:flex;"><span>{{< <span style="color:#f92672">slide</span> <span style="color:#a6e22e">background-color</span><span style="color:#f92672">=</span><span style="color:#e6db74">"#0000FF"</span> >}}
</span></span><span style="display:flex;"><span>{{< <span style="color:#f92672">slide</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"my-style"</span> >}}
</span></span>

Custom CSS Example

Let’s make headers navy colored.

Create assets/css/reveal_custom.css with:

<span style="display:flex;"><span>.<span style="color:#a6e22e">reveal</span> <span style="color:#f92672">section</span> <span style="color:#f92672">h1</span><span style="color:#f92672">,</span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">reveal</span> <span style="color:#f92672">section</span> <span style="color:#f92672">h2</span><span style="color:#f92672">,</span>
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">reveal</span> <span style="color:#f92672">section</span> <span style="color:#f92672">h3</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">navy</span>;
</span></span><span style="display:flex;"><span>}
</span></span>

Questions?

Ask

Documentation

Custom Slide Customize the slide style and background {{< slide background-image="/img/boards.jpg" >}} {{< slide background-color="#0000FF" >}} {{< slide class="my-style" >}} Custom CSS Example Let’s make headers navy colored. Create assets/css/reveal_custom.css with: .reveal section h1, .reveal section h2, .reveal section h3 { color: navy; } Questions? Ask Documentation