mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-23 16:16:28 +00:00
George Cushen
8857bffa20
Unfortunately, the popular Markdown editors (VS Code and Typora) still don't support the more human-friendly TOML front matter syntax. Therefore, make it easier to edit content in popular editors by converting the demo front matter from TOML to YAML. Except for publications as they are primarily data based (rather than content based) and are automatically generated by Academic Admin. Also, continue to use TOML for configuration files. See #1069
167 lines
3.1 KiB
Markdown
167 lines
3.1 KiB
Markdown
---
|
|
title: Slides
|
|
summary: An introduction to using Academic's Slides feature.
|
|
authors: []
|
|
tags: []
|
|
categories: []
|
|
date: "2019-02-05T00:00:00Z"
|
|
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
|
|
---
|
|
|
|
# Welcome to Slides
|
|
|
|
[Academic](https://sourcethemes.com/academic/)
|
|
|
|
---
|
|
|
|
## 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="/img/boards.jpg" >}}
|
|
|
|
## Custom Slide
|
|
|
|
Customize the slide style and background
|
|
|
|
```markdown
|
|
{{</* slide background-image="/img/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://discourse.gohugo.io)
|
|
|
|
[Documentation](https://sourcethemes.com/academic/docs/)
|