starter-academic-mpvd/exampleSite/content/slides/example/index.md
George Cushen 328c4b03db chore: add exampleSite
And associated files for Hugo Themes Site
2020-09-03 21:09:28 +01:00

3.3 KiB

title summary authors tags categories date slides
Slides An introduction to using Academic's Slides feature.
2019-02-05T00:00:00Z
theme highlight_style
black dracula

Create slides in Markdown with Academic

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

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

Questions?

Ask

Documentation