---
name: marp
description: Writing slide decks with marp. Use when creating or editing markdown for Marp.
---

# Marp: Markdown Presentation Ecosystem

Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks.

## FrontMatter

Specify that the Markdown file is a Marp file in the frontmatter.

```markdown
---
marp: true
---
```

You can configure the following settings in the frontmatter:

| Name     | Value                                             |
| -------- | ------------------------------------------------- |
| marp     | true                                              |
| size     | 16:9                                              |
| theme    | 'pixy'                                            |
| header   | Specify the content of slide header               |
| footer   | Specify the content of slide footer               |
| paginate | Show page number on the slide if you set `true`   |
| class    | Specify HTML class of slide's `<section>` element |

## How To

### New Slides

Separate new slides using horizontal rules (`---`).

### Directives

You can configure slide settings using `<!-- (directive): (value) -->`. This applies to all subsequent slides. To apply settings to a specific slide only, prefix the directive name with an underscore (`_`) (e.g., `<!-- _class: text-xl -->`).

Directives Table:

| Name               | Description                                        |
| ------------------ | -------------------------------------------------- |
| class              | Specify HTML class of slide's `<section>` element. |
| backgroundColor    | Setting `background-color` style of slide.         |
| backgroundImage    | Setting `background-image` style of slide.         |
| backgroundPosition | Setting `background-position` style of slide.      |
| backgroundRepeat   | Setting `background-repeat` style of slide.        |
| backgroundSize     | Setting `background-size` style of slide.          |
| color              | Setting `color` style of slide.                    |

### Classes

Using `<!-- class: (name) -->` applies the specified class to all subsequent slides. To specify multiple classes, write them as `<!-- class: (name1) (name2) -->`. To apply a class to the current slide only, use `<!-- _class: (name) -->`. Note that when `_class` is specified, global styles are not inherited. Make sure to apply global styles if you want to keep using them.

### Images

You can specify images using the standard Markdown syntax: `![](<path>)`.

| Syntax                        | Description                      |
| ----------------------------- | -------------------------------- |
| `![w:400px h:300px](img.png)` | Specify size                     |
| `![bg](img.png)`              | Background image                 |
| `![bg fit](img.png)`          | Background (scale to slide size) |
| `![bg cover](img.png)`        | Background (cover)               |
| `![bg contain](img.png)`      | Background (contain)             |
| `![bg left:40%](img.png)`     | Split layout (left side)         |
| `![bg right:60%](img.png)`    | Split layout (right side)        |

### GFM Syntax

-   Headings: `# H1`, `## H2`, `### H3`
-   Emphasis: `**Bold**`, `*Italic*`
-   Lists: `- Item`, `1. Numbered list`
-   Tables

### Background Color

Specify using `<!-- _backgroundColor: #1a1a2e -->`

### Inline HTML

Apply CSS per slide using `<style scoped>`.

### Equations

Supports KaTeX. `$E=mc^2$` / `$$ ... $$`

## Template

Please use `TEMPLATE.md`.

## Sample

Please refer to `EXAMPLE.md`.

## Rules

-   Apply the `lead` style to the class directive on the title (lead) slide.
-   Apply the `topic` style to the class directive on the first slide of a new topic.
-   Keep H1 headings on slides under 20 characters.
-   Keep H1 headings on lead and topic slides under 15 characters.
-   Slides must have a maximum of 5 lines. The maximum line length is 36 characters. For list items, show a maximum of 8 items. For lists with 4 or fewer items, apply the `list-lg` style to the class directive. If the slide contains only code or preformatted text, the maximum is 15 lines.
-   Tables must have a maximum of 1 column heading row and 8 data rows.
-   Do not use bold `**Heading**` for headings. Use H2 heading `## Heading` instead.
-   Use bold `**emphasis**` for highlights (emphasis).
-   Use one of the following layouts using H2 and H3. The maximum number of lines is fixed.

```markdown
---
# H1
## H2

(Line1)
(Line2)
(Line3)
(Line4)
(Line5)

---
# H1
## H2

(Line1)
(Line2)

## H2

(Line1)
(Line2)

---
# H1
## H2

-   (Line1)
-   (Line2)
-   (Line3)

## H2

-   (Line1)
-   (Line2)
-   (Line3)

---
# H1
### H3

(Line1)
(Line2)

### H3

(Line1)
(Line2)

### H3

(Line1)
(Line2)
```
