MARP - Markdown presentation ecosystem

In

Install

Writing slides

  • Pages can be split with horizontal rulers 
    1
    2
    3
    4
    5
    6
    7
    # Slide 1
    foo

    ---

    # Slide 2
    bar

Directives

  • Directives

    • Insert front matter on top of markdown 
      1
      2
      3
      ---
      theme: default
      ---
    • You may use HTML anywhere 
      1
      <!-- theme: default -->

  • directives apply from the page they are defined, onwards.

  • if they start with an underscore, they are only applied to a single page.

Global

Directive Action
theme choose theme (built-in: default, uncover and gaia)
size choose size (16:9 and 4:3)
headingDivider divide slude pages at before of specific heading levels 
1
2
3
4
---
theme: gaia
size: 4:3
---

Local

Directive Action
paginate show pagination by set true
header specify contents for header
footer specify contents for footer
class set HTML class for current slide (invert inverts the color scheme)
color set color text
backgroundColor set bakcground color
backgroundImage background-image style
backgroundPosition background-position style
backgroundRepeat background-repeat style
backgroundSize background-size style 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
backgroundColor: black
---

# Slide 1

---

 <!-- background Color: yellow - ->
# Slide 2

---

 <!-- _color: white - ->
# Slide 3

---

# Slide 4

Image syntax

  • You can reize an image with the width (h) and heigh (h) keywords. 
    1
    ![width:100px heigh:100px](image.png)
  • You can add CSS filters with blur 
    1
    ![blur sepia:50%](image.png)
  • you can define background imagess (you can add vertical to change ailgnment) 
    1
    2
    ![bg opacity](image.png)
    ![bg blur:3px](image2.png)
  • you can split the background (e.g. text left, image right) 
    1
    ![bg right](image.png)

Fragmented list

1
2
3
4
5
6
7
8
9
10
11
12
# Bullet list
- One
- Two
- Three

---

# Fraagmented list

- One
- Two
- Three

Math typesetting

  • KaTeX or pandoc 
    1
    2
    $ax^2+bc+c$
    $$I_{x}=\int\intRy^2f(x,y)\cdot{}dydx$$

Autoscaling

  • some themes use it
    1
    ## <!-- fit --> Auto-fitting header

Themes

CSS

Marp uses <section> as the container of each slide.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* @theme my-custom-theme */

@import 'default';

@section {
    /* Specify slide size */
    width: 960px;
    heigh: 720ps;
}

h1 {
    font-size: 30px;
    color: #c33;
}

Tweaks on Markdown

  • You may use the style tag 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ---
    theme: default
    ---

    <style>
    section{
        background: yellow;
    }

    The background is yellow now
    </style>
  • You may add a custom style to a class 
    1
    <!-- _class: custom-class -->

Scoped style

  • One-shot stylings 
    1
    2
    3
    4
    5
    6
    <style scoped>
    a {
        color: green;
    }
    </style>
    ![Green link](https://marp.app)