0d7399e14d
As users regularly ask how to get the example content.
3.3 KiB
3.3 KiB
title | summary | authors | tags | categories | date | slides | ||||
---|---|---|---|---|---|---|---|---|---|---|
Slides | An introduction to using Wowchemy's Slides feature. | 2019-02-05T00:00:00Z |
|
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
orSpace
- 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 = "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!
{{% fragment %}} One {{% /fragment %}} {{% fragment %}} Two {{% /fragment %}} {{% fragment %}} Three {{% /fragment %}}
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!
{{< speaker_note >}}
- Only the speaker can read these notes
- Press
S
key to view {{< /speaker_note >}}
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
{{< slide background-image="/media/boards.jpg" >}}
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;
}