Example Slides

Create slides in Markdown with Wowchemy

Wowchemy | Documentation


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

Code Highlighting

Inline code: variable

Code block:

porridge = "blueberry"
if porridge == "blueberry":
    print("Eating...")

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 >}} $\mathbf{y} =  $ {{< /fragment >}}
{{< fragment >}} $X\boldsymbol\beta$ {{< /fragment >}}
{{< fragment >}} $+ \boldsymbol\varepsilon$ {{< /fragment >}}

Press Space to play!

$\mathbf{y} = $ $X\boldsymbol\beta$ $+ \boldsymbol\varepsilon$


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 %}}

- Only the speaker can read these notes
- Press `S` 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

Custom Slide

Customize the slide style and background

{{< slide background-image="boards.webp" >}}
{{< 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 Footer © 2022 GitHub, Inc. Footer navigation Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About

Dirk Brockmann
Dirk Brockmann
Director

Director Center Synergy of Systems, Professor Biology of Complex Systems