# Advanced examples

---

## Resizing images

You can tell an image to shrink to or fill the screen by using [`r-stretch`](https://revealjs.com/layout/#stretch). Very handy if the image is too large or too small!

---

You can also specify the exact height and width using HTML.

---

- The HTML width/height sizes are relative to those specified in the `mkslides.yml` file.
  - These sizes are called the canvas sizes
  - In this example: `1920x1080`.
  - E.g.
    - an `img` with width `960` will take 50% of the width.
    - an `img` with height `540` will take 50% of the height.
  - When the browser is resized, Reveal.js wil take care of the scaling so you don't have to. You just do everything relative to the resolution set in `mkslides.yml`.

---

## Video

---

## Website

Anything that allows you to embed a website, you can use too:

You can scroll, zoom in/out, ... .

---

Not all websites allow this unfortunately, so be sure to test it out in advance!

_Tip: some websites capture the keyboard, causing the arrow keys (or others) to not work anymore. E.g. cookie banners etc. ._

---

## Mermaid Graphs

You can use [Mermaid](https://mermaid.js.org/intro/) graphs:

<!--
According to upstream issue https://github.com/zjffun/reveal.js-mermaid-plugin/issues/21,
use the following solution:

use

instead of

```mermaid
...
```
-->

<div class="mermaid">
%%{init: {
    'theme': 'light'
}%%
flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];
</div>

This is done by the [Reveal.js Mermaid](https://github.com/zjffun/reveal.js-mermaid-plugin) plugin.

---

## PlantUML Graphs

You can also use [PlantUML](https://plantuml.com/) graphs:

```language-plantuml
@startuml
scale 2
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
```

This is done by the [Reveal.js PlantUML](https://github.com/zjffun/reveal.js-mermaid-plugin) plugin.

_Tip: use PlantUML's `scale` to enlarge or shrink the graph._

---

## Fragments

- Item 1 
- Item 2 
- Item 3

---

## Fragments.

You can specify a custom order of appearance.

- Item 1 
- Item 2 
- Item 3

---

## Custom background color

[Documentation](https://revealjs.com/backgrounds/)

---

## Custom background image

[Documentation](https://revealjs.com/backgrounds/)

---

## Multi-column slides

This defies the use of markdown, but if you really want it you can use some HTML and CSS magic:

- Bullet
  - Bullet
- Bullet
- Bullet

</div>

<div>

1. List
   1. List
2. List
3. List

</div>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...

</div>

<div>

![](./img/hello.webp)

</div>

Based on [this StackOverflow post](https://stackoverflow.com/a/44392145).

---

## Want to center something?

This defies the use of markdown, but if you really want it you can use some HTML and CSS magic:

![](./img/hello.webp)

</div>

---

## Transitions

You can change the way slides transition from one to the next by setting the [`transition`](https://revealjs.com/transitions/) option in the `reveal.json` file.

---

## Permanently show the notes

You can set the slideshow to permanently show the notes by setting the [`showNotes`](https://revealjs.com/speaker-view/) option in the `reveal.json` file.

---

## And a lot more!

- https://github.com/HoGentTIN/hogent-revealmd
  - Inspired by the work of [Bert Van Vreckem](https://github.com/bertvv) at https://github.com/HoGentTIN/hogent-revealjs
- https://github.com/MartenBE/mkslides-reveal
- https://github.com/webpro/reveal-md
- https://revealjs.com/

---