179 lines
2.5 KiB
Markdown
179 lines
2.5 KiB
Markdown
+++
|
|
weight = 20
|
|
+++
|
|
{{< slide id=usage >}}
|
|
|
|
# Usage
|
|
|
|
---
|
|
{{< slide id=prerequisite >}}
|
|
|
|
## Prerequisite
|
|
|
|
First, add this to your `config.toml`:
|
|
|
|
```toml
|
|
[outputFormats.Reveal]
|
|
baseName = "index"
|
|
mediaType = "text/html"
|
|
isHTML = true
|
|
```
|
|
|
|
---
|
|
|
|
### Presentation at site root
|
|
|
|
Create `content/_index.md`:
|
|
|
|
```markdown
|
|
+++
|
|
outputs = ["Reveal"]
|
|
+++
|
|
|
|
# Slide 1
|
|
|
|
Hello world!
|
|
```
|
|
|
|
---
|
|
{{< slide id=adding-slides >}}
|
|
|
|
### Add slides
|
|
|
|
Separate them by `---` surrounded by blank lines:
|
|
|
|
```
|
|
# Slide 1
|
|
|
|
Hello world!
|
|
|
|
---
|
|
|
|
# Slide 2
|
|
|
|
Hello program!
|
|
```
|
|
|
|
---
|
|
{{< slide id=math-equations >}}
|
|
|
|
### Cool equations
|
|
|
|
For equations, you can use a [`math`](https://docs.gitlab.com/ee/user/markdown.html#math) code block:
|
|
|
|
````code
|
|
```math
|
|
\tag*{(1)} \lim\limits_{x \to \infty} \exp(-x) = 0
|
|
```
|
|
````
|
|
<small>
|
|
renders to:
|
|
</small>
|
|
|
|
{{< math >}}
|
|
\tag*{(1)} \lim\limits_{x \to \infty} \exp(-x) = 0
|
|
{{< /math >}}
|
|
|
|
Inline equations (e. g. $E=mc^2$) are wrapped in single $:
|
|
|
|
```code
|
|
Albert Einstein's famous formula: $E=mc^2$
|
|
```
|
|
|
|
<small>💡 Note: When using inline math only (no math code block present), you have to set `math=true` in the frontmatter of your slide page.</small>
|
|
|
|
<small>💡 Note: for code blocks support (` ```math ...``` `), hugo highlighting must be on (`codeFences = true` in `config.toml`). If you want to set `codeFences = false`, use the `math` [shortcode](#/math-shortcode).</small>
|
|
|
|
---
|
|
{{< slide id=mermaid-diagrams >}}
|
|
|
|
### Mermaid
|
|
|
|
Slides can contain [mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams:
|
|
|
|
````code
|
|
```mermaid
|
|
graph LR
|
|
A --> B
|
|
B --> C
|
|
```
|
|
````
|
|
|
|
Or (see [mermaid shortcode](#/mermaid-shortcode))
|
|
|
|
```code
|
|
{{</* mermaid */>}}
|
|
graph LR
|
|
A --> B
|
|
B --> C
|
|
{{</* /mermaid */>}}
|
|
```
|
|
|
|
results in:
|
|
|
|
{{< mermaid >}}
|
|
graph LR
|
|
A --> B
|
|
B --> C
|
|
{{< /mermaid >}}
|
|
|
|
<small>💡 Note: for code blocks support (` ```mermaid ...``` `), hugo highlighting must be on (codeFences = true in config.toml)</small>
|
|
|
|
|
|
---
|
|
|
|
### Add slides with other files
|
|
|
|
Add slides to `content/home/*.md`
|
|
|
|
```markdown
|
|
+++
|
|
weight = 10
|
|
+++
|
|
|
|
# Slide 3
|
|
|
|
---
|
|
|
|
# Slide 4
|
|
```
|
|
|
|
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
|
|
|
|
---
|
|
|
|
### Presentation at '/{section}/'
|
|
|
|
Add slides to `content/{section}/_index.md`:
|
|
|
|
```markdown
|
|
+++
|
|
outputs = ["Reveal"]
|
|
+++
|
|
|
|
# Slide 1
|
|
|
|
---
|
|
|
|
# Slide 2
|
|
```
|
|
|
|
---
|
|
|
|
Add slides from other files in `content/{section}/*.md`
|
|
|
|
```markdown
|
|
+++
|
|
weight = 10
|
|
+++
|
|
|
|
# Slide 3
|
|
|
|
---
|
|
|
|
# Slide 4
|
|
```
|
|
|
|
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
|
|
|