Skip to content

Latest commit

 

History

History
224 lines (140 loc) · 5.45 KB

c2.md

File metadata and controls

224 lines (140 loc) · 5.45 KB
title
Chapter 2 - advanced examples

Advanced examples

Resizing images

You can tell an image to shrink to or fill the screen by using r-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

<iframe width="1280" height="720" data-src="https://www.youtube.com/embed/sGF6bOi1NfA" allowfullscreen></iframe>

Website

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

<iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d5018.051311095338!2d3.700269598821751!3d51.03414688375593!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x47c373dfecba42a1%3A0x967548ec6ae567f6!2sGent%20Sint%20Pieters%20Station%2C%20Koningin%20Maria%20Hendrikaplein%2C%20Ghent!3m2!1d51.036234!2d3.7108572!4m5!1s0x47c373d974e7039b%3A0x2b5e1bf81b807f8c!2sHOGENT%20campus%20Schoonmeersen%2C%20Valentin%20Vaerwyckweg%201%2C%209000%20Gent!3m2!1d51.0330995!2d3.7030491999999997!5e0!3m2!1sen!2sbe!4v1697794155393!5m2!1sen!2sbe" width="1500" height="550" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>

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

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

<iframe width="550" height="550" data-src="https://github.com"></iframe> <iframe width="550" height="550" data-src="https://frankdeboosere.be/"></iframe>

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

%%{
  init: {
    "flowchart": {
    },
  }
}%%

graph TD
    A[Enter Chart Definition] --> B(Preview)
    B --> C{decide}
    C --> D[Keep]
    C --> E[Edit Definition]
    E --> B
    D --> F[Save Image and Code]
    F --> B
Loading

This is done by the Reveal.js Mermaid plugin.

PlantUML Graphs

You can also use PlantUML graphs:

@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 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

Custom background image

Documentation

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
  1. List
    1. List
  2. List
  3. List

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

Based on this StackOverflow post.

Want to center something?

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

Transitions

You can change the way slides transition from one to the next by setting the transition option in the reveal.json file.

Permanently show the notes

You can set the slideshow to permanently show the notes by setting the showNotes option in the reveal.json file.

And a lot more!