—

authors: []

categories: []

date: “2019-02-05T00:00:00Z”

slides:

highlight_style: dracula

theme: black

summary: An introduction to using Wowchemy’s Slides feature.

tags: []

title: 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: E

—

## Code Highlighting

Inline code: variable

Code block:

```python

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

```markdown

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

```markdown

{{< 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:

```css

.reveal section h1,

.reveal section h2,

.reveal section h3 {

color: navy;

}

```

—

# Questions?

Ask

Documentation