|
@@ -0,0 +1,166 @@
|
|
|
+---
|
|
|
+title: Example Slides
|
|
|
+summary: An introduction to using Wowchemy's Slides feature.
|
|
|
+authors: []
|
|
|
+tags: ['Tutorials']
|
|
|
+categories: []
|
|
|
+date: '2019-02-05'
|
|
|
+slides:
|
|
|
+ # Choose a theme from https://github.com/hakimel/reveal.js#theming
|
|
|
+ theme: black
|
|
|
+ # Choose a code highlighting style (if highlighting enabled in `params.toml`)
|
|
|
+ # Light style: github. Dark style: dracula (default).
|
|
|
+ highlight_style: dracula
|
|
|
+---
|
|
|
+
|
|
|
+# Create slides in Markdown with Wowchemy
|
|
|
+
|
|
|
+[Wowchemy](https://wowchemy.com/) | [Documentation](https://wowchemy.com/docs/content/slides/)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 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](https://github.com/hakimel/reveal.js#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!
|
|
|
+
|
|
|
+{{% 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
|
|
|
+
|
|
|
+```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!
|
|
|
+
|
|
|
+{{< 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="boards.jpg" >}}
|
|
|
+
|
|
|
+## 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](https://discord.gg/z8wNYzb)
|
|
|
+
|
|
|
+[Documentation](https://wowchemy.com/docs/content/slides/)
|