Marp

Markdown Presentation Ecosystem

https://marp.app/

How to write slides

Split pages by horizontal ruler (---). It's very simple! 😆

# Slide 1

foobar


# Slide 2

foobar

Alternatively, set the directive headingDivider. To automatically split at h1 headers add to the document metadata:

headingDivider: 1

Markdown !!!

Just write Markdown ==here==!!!

  • Bullet 1
  • Bullet 2

Subtitle

Marp Link

Emojies: 😂 😉 😄 🚀

Markdown !!!

Use automatic syntax highlighting

def foo(bar: str) -> str:
    return bar.strip()

if __name__ == "__main__":
    main()

Markdown !!!

Tables

Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

Markdown !!!

Crazy Math

You have to add math: mathjax to the document metadata

Custom Backgrounds

Use Image Directives (local or web-resource):

![bg](https://patrikhlobil.github.io/Blog/blogs/images/background.png)

Custom Backgrounds


Multiple Backgrounds!!!

![bg](https://patrikhlobil.github.io/Blog/blogs/images/cats.jpg)

![bg](https://patrikhlobil.github.io/Blog/blogs/images/sea.jpg)

Images

Put Images to the left

![bg left](https://patrikhlobil.github.io/Blog/blogs/images/cats.jpg)

Images

... or to the right

![bg right](https://patrikhlobil.github.io/Blog/blogs/images/cats.jpg)

Images

... or adjust the width ...

![bg left:25%](https://patrikhlobil.github.io/Blog/blogs/images/cats.jpg)

Images

... or apply filters:

![bg left sepia](https://patrikhlobil.github.io/Blog/blogs/images/sea.jpg)
![bg right blur](https://patrikhlobil.github.io/Blog/blogs/images/sea.jpg)

GIFS !!!

![bg right](https://media0.giphy.com/media/SbtWGvMSmJIaV8faS8/200w.webp?
cid=ecf05e47i5eyozrdt5aytc41m0o7ea6uxu6ck2088uxo4ojz&ep=v1_gifs_search&rid=200w.webp&ct=g)

Mermaid Support

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me

HTML Support

Add custom CSS to document metadata

---
marp: true
style: |
  .small-red-text {
    font-size: 0.75rem;
    color: red;
  }
---
# Title
<div class="small-red-text"> Small Red Text</div>
Small Red Text

HTML Support

Fragmented lists

Use * to get a fragmented list, where each item appears one after each other and - to directly display all items.

Non-Fragmented

  • non-frag 1
  • non-frag 2

Fragmented

  • frag 1
  • frag 2

Speaker Notes

Just add Speaker Notes via:

<!-- 
Some notes here that might be useful.
-->

Directives

With Directives, it is easy to modify the behaviour of Marp for a single slide or the whole presentation.

Local Directives

Using local directives (prepend with _), one can modify a single page, e.g.

<!-- _backgroundColor: #180f61 -->

Global Directives

Using global directives, one can modify the bejaviour of the slides from the current slide on

<!-- backgroundColor: aqua -->

Add this anywhere in your Markdown file

Some notes here that might be useful.