Mon, 01 Jan 0001 00:00:00 +0000

#— #title: Slides #summary: An introduction to using Hugo Blox Builder’s Slides feature. #authors: [] #tags: [] #categories: [] #date: ‘2019-02-05T00:00:00Z’ #slides:

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 Hugo Blox Builder

#Hugo Blox Builder | 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:

#```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

#```

#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

Slides | Patricia Rubisch

Choose a theme from https://github.com/hakimel/reveal.js#theming

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 Hugo Blox Builder

Features

Controls

Code Highlighting

print(“Eating…”)

Math

Fragments

Speaker Notes

{{% /speaker_note %}}

Themes

Custom Slide

Custom CSS Example

color: navy;

Questions?

Slides | Patricia Rubisch

Choose a theme from https://github.com/hakimel/reveal.js#theming

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 Hugo Blox Builder

Features

Controls

Code Highlighting

print(“Eating…”)

Math

Fragments

Speaker Notes

{{% /speaker_note %}}

Themes

Custom Slide

Custom CSS Example

color: navy;

Questions?

Choose a code highlighting style (if highlighting enabled in `params.toml`)