Welcome to Slides

Academic

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:

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

Math

In-line math: x+y=z

Block math:

f(x)=;2(x+4)(x−4)(x+4)(x+1)

Fragments

Make content appear incrementally

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

Press Space to play!

One Two Three

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

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

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

{{< <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 style="color:#f92672">slide</span> <span style="color:#a6e22e">background-color</span><span style="color:#f92672">=</span><span style="color:#e6db74">"#0000FF"</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 style="color:#a6e22e">reveal</span> <span style="color:#f92672">section</span> <span style="color:#f92672">h1</span><span style="color:#f92672">,</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 style="color:#a6e22e">reveal</span> <span style="color:#f92672">section</span> <span style="color:#f92672">h3</span> {
  <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">navy</span>;
}