Create slides in Markdown with Wowchemy

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 class="line"><span class="cl"><span class="n">porridge</span> <span class="o">=</span> <span class="s2">"blueberry"</span>
</span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="n">porridge</span> <span class="o">==</span> <span class="s2">"blueberry"</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="nb">print</span><span class="p">(</span><span class="s2">"Eating..."</span><span class="p">)</span>
</span></span>

Math

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

Block math:

$f (x) =; \frac{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

<span class="line"><span class="cl">{{% speaker_note %}}
</span></span><span class="line"><span class="cl"><span class="k">-</span> Only the speaker can read these notes
</span></span><span class="line"><span class="cl"><span class="k">-</span> Press <span class="sb">`S`</span> key to view
</span></span><span class="line"><span class="cl">{{% /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 class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">slide</span> <span class="na">background-image</span><span class="o">=</span><span class="s">"/media/boards.jpg"</span> <span class="p">></span>}}
</span></span><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">slide</span> <span class="na">background-color</span><span class="o">=</span><span class="s">"#0000FF"</span> <span class="p">></span>}}
</span></span><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">slide</span> <span class="na">class</span><span class="o">=</span><span class="s">"my-style"</span> <span class="p">></span>}}
</span></span>

Custom CSS Example

Let’s make headers navy colored.

Create assets/css/reveal_custom.css with:

<span class="line"><span class="cl"><span class="p">.</span><span class="nc">reveal</span> <span class="nt">section</span> <span class="nt">h1</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">reveal</span> <span class="nt">section</span> <span class="nt">h2</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">reveal</span> <span class="nt">section</span> <span class="nt">h3</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="k">color</span><span class="p">:</span> <span class="kc">navy</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span>

Questions?

Ask

Documentation

Custom Slide Customize the slide style and background {{ < slide background-image = "/media/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