Marp Feature Showcase

Markdown presentations with live examples and authoring snippets.

Use →, Space, swipe, or the controls to move through fragments and slides.

What this deck covers

  • Markdown slide writing
  • Directives and their scopes
  • Themes, sizes, and CSS styling
  • Backgrounds and image syntax
  • Multi-column and side-image layouts
  • Fragments, notes, and metadata
  • Code, math, emoji, and HTML
  • Marp CLI / VS Code features
  • Site-specific plugin extensions

Marp in one sentence

Marp turns Markdown into presentation slides.

# Slide 1

Write content in Markdown.

---

# Slide 2

A horizontal rule starts the next slide.
The first two dashed rulers are front matter if they appear at the very top of the file.

Minimal complete deck

---
marp: true
theme: gaia
paginate: true
---

# Hello, Marp

Markdown in. Slides out.

---

## Next slide

- Keep writing Markdown
- Export when ready

Markdown stays Markdown

  • Bullet lists use normal - markers.
  • Bold, italic, inline code, and links work.
  • Blockquotes are useful for emphasis.

If you can write CommonMark, you can write a Marp deck.

Marp Core extras

Feature Example
GFM tables This table
Strikethrough old wording → new wording
Line breaks One line
another line
Emoji 🚀 ✨ 📚

Marp Core also auto-generates heading slugs in rendered HTML.

Directives: the control plane

Directives are YAML values embedded in front matter or HTML comments.

---
theme: uncover
paginate: true
backgroundColor: '#111827'
---

<!-- _class: lead -->

# Spot directives affect only this slide

Use them for themes, page numbers, colors, headers, footers, backgrounds, and more.

Three directive scopes

Scope Syntax Behavior
Global theme: gaia Whole deck; last value wins
Local backgroundColor: skyblue This slide and following slides
Spot _backgroundColor: skyblue Current slide only 
<!-- color: red -->
<!-- _color: blue -->

Spot directives start with _ and do not cascade.

Global directives checklist

Directive Use it for
marp Enable Marp in editor integrations such as VS Code
theme Select a registered theme (default, gaia, uncover, custom)
size Choose theme-provided slide size, commonly 16:9 or 4:3
style Add CSS tweaks to the active theme
headingDivider Auto-split slides at heading levels
lang Set slide language
title, author, description, keywords, url, image Export metadata

Local directives checklist

Directive Use it for
paginate Page numbers: true, false, hold, or skip
header, footer Reusable slide chrome with Markdown inline content
class Theme classes such as lead, invert, or custom classes
backgroundColor, backgroundImage Background styling
backgroundPosition, backgroundRepeat, backgroundSize Background placement
color Slide text color
transition Marp CLI bespoke-template page transitions

Built-in themes

Marp Core ships three official themes.

theme: default

# or

theme: gaia

# or

theme: uncover

gaia is active in this showcase. lead and invert are theme classes.

Class directives

This slide uses:

<!-- _class: lead invert -->

The class is applied to the rendered slide <section>.

Header supports inline Markdown

Header and footer

This slide uses spot directives so the header/footer do not leak to the next slide.

<!--
_header: '**Header** supports inline Markdown'
_footer: '_Footer_ supports `code` and links'
-->
Footer supports code and links

Pagination modes

paginate can show, hide, include, or exclude slide numbers.

Value Shows number Increments count
true Yes Yes
false No Yes
hold Yes No
skip No No

This deck also customizes the counter through section::after.

Color and background directives

This slide uses CSS-like local directives:

<!--
_backgroundColor: '#042f2e'
_color: '#ecfeff'
-->
teal
cyan
blue
violet
pink

Theme tweaks with style

Use front-matter style: | for deck-wide CSS.

---
style: |
  section {
    font-size: 25px;
  }

  section::after {
    content: attr(data-marpit-pagination) ' / '
      attr(data-marpit-pagination-total);
  }
---

Prefer style over raw <style> when authoring shareable Markdown.

Scoped style

<style scoped> applies only to the current slide.

This heading and strong text are intentionally different here.

<style scoped>
h1 { color: #67e8f9; }
strong { color: #fde68a; }
</style>

Custom theme CSS

A reusable theme is just CSS with metadata.

/* @theme brand */
@import 'gaia';

section {
  background: #0f172a;
  color: #e2e8f0;
}

section.title {
  display: grid;
  place-items: center;
}

Register it in the Marp engine, then activate it with theme: brand.

Slide size

Built-in themes support 16:9 and 4:3.

---
theme: gaia
size: 16:9
---

Custom themes can define named sizes with @size metadata. The slide size belongs to the theme, so authors choose from sizes the theme exposes.

Heading divider

headingDivider can convert plain Markdown into slides automatically.

---
headingDivider: 2
---

# Title stays on slide 1

## This starts slide 2

### This stays on slide 2

## This starts slide 3

Good for notes that should stay readable outside Marp.

Multi-column layouts

Marp does not need a special columns directive: use CSS grid/flex, raw HTML, or a Markdown-it container plugin.

Left column

  • Problem framing
  • Definitions
  • Constraints

Right column

  • Examples
  • Trade-offs
  • Takeaways
<div class="columns">
  <div>Left</div>
  <div>Right</div>
</div>

section .columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Basic background image

Put bg in image alt text.

![bg cover](/assets/marp-feature-showcase/aurora.svg)

Background sizing keywords: cover, contain, fit, auto, percentages, widths, and heights.

Split backgrounds

The content column shrinks away from the image.

![bg right:42% contain](/assets/marp-feature-showcase/marp-card.svg)

Use left, right, left:33%, or right:40%.

Multiple backgrounds

![bg vertical](panel-a.svg)
![bg](panel-b.svg)
![bg](panel-c.svg)

Advanced backgrounds require inline SVG slide rendering, which this site already enables.

Image sizing

Inline images understand dimensions in alt text.



![width:170px](image.svg)
![height:170px](logo.png)
![w:170 h:170](panel.svg)

Image filters




![sepia:1](image.svg)
![grayscale:1](image.svg)
![hue-rotate:180deg](image.svg)
![drop-shadow:0,10px,18px,rgba(0,0,0,.45)](image.svg)

Filters also include blur, brightness, contrast, invert, opacity, and saturate.

Fragmented lists

Use * for bullet fragments and 1) for ordered fragments.

  • First appears on click.
  • Then this item.
  • Then the final bullet.
* First appears on click.
* Then this item.
* Then the final bullet.

Ordered fragments

  1. Discover the story.
  2. Write slides in Markdown.
  3. Export or present.
1) Discover the story.
2) Write slides in Markdown.
3) Export or present.

The rendered list gets data-marpit-fragment attributes; player support reveals them.

Fit headings

<!-- fit --> inside a heading lets Marp auto-scale the heading to the slide width.

# <!-- fit --> Fit headings

Syntax highlighting

This site adds Prism highlighting on top of Marp Core.

export interface SlideFeature {
  name: string;
  example: string;
  supported: boolean;
}

export const feature: SlideFeature = {
  name: 'Code fences',
  example: '```ts',
  supported: true,
};

Auto-shrinking code blocks

Long code blocks can shrink instead of spilling horizontally.

const features = [
  'directives',
  'themes',
  'background images',
  'advanced image syntax',
  'fragments',
  'speaker notes',
  'math',
  'emoji',
  'syntax highlighting',
  'HTML export',
  'PDF export',
  'PowerPoint export',
  'custom themes',
  'custom transitions',
];

console.log(features.map((feature) => `Marp supports ${feature}`).join('\n'));

Math typesetting

Inline math works: E=mc2E = mc^2 and a2+b2=c2a^2 + b^2 = c^2.

Block math works too:

∫−∞∞e−x2 dx=π\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} 

Inline: $E = mc^2$

$$
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
$$

Raw HTML when enabled

This renderer allows safe author-controlled HTML.

HTML is useful for small layout accents, keyboard hints like F, or semantic snippets. 

<p class="note">Keyboard hint: <kbd>F</kbd></p>

Official Marp Core can allow, deny, or sanitize HTML through its html option.

Presenter notes

HTML comments that are not directives become presenter notes.

# Slide title

<!-- Remember to pause here and ask for questions. -->

This site captures notes from Marp Core; a future presenter view could render them.

Footnotes through plugins

Marp is extensible through markdown-it and Marpit plugins.1

This site adds footnotes and redistributes them per slide so they do not all land at the end.

Marp is extensible.[^plugins]

[^plugins]: This deck uses a markdown-it footnote plugin.

  1. Footnotes are a project extension here, not part of the bare Marpit syntax. ↩︎

Marp Core configuration

The engine in this project is configured in src/utils/marp.ts.

const marp = new Marp({
  inlineSVG: true,
  html: true,
  math: false,
});

marp.use(markdownItPrism);
marp.use(footnote);
marp.use(marpSlideFootnotes);
marp.use(katex, {});

That means this deck demonstrates Marp plus local code highlighting, KaTeX, and footnote extensions.

Inline SVG slides

Inline SVG wraps each slide in an SVG + foreignObject.

Why it matters:

  • Pixel-perfect scaling to the viewport
  • Advanced backgrounds and split backgrounds
  • Auto-scaling for fit headings, code, and math
  • ::backdrop styling for the slide letterbox area
::backdrop {
  background: #020617;
}

Transitions

Marp CLI's bespoke template supports a transition local directive.

---
transition: fade 700ms
---

# This transition applies to the next slide boundary

Built-ins include fade, cover, cube, flip, slide, wipe, zoom, and many more. Use _transition: none to disable one boundary.

This site's Astro page is now only a thin shell around Marp Core output and the Marp CLI bespoke runtime, so the same transition metadata is preserved for browser playback.

Custom transitions

Custom transitions are CSS keyframes with Marp naming conventions.

@keyframes marp-transition-dissolve {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes marp-incoming-transition-slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

Metadata and accessibility

Useful export metadata lives in front matter.

---
lang: en-US
title: Marp Feature Showcase
author: Logical Elixirs
description: A live deck demonstrating Marp features.
keywords: markdown, slides, marp
url: https://example.com/slides/marp-feature-showcase
image: https://example.com/og.png
---

Use real alt text for images unless an image is purely decorative.

VS Code workflow

Marp for VS Code recognizes marp: true.

  • Live preview while writing
  • Directive completions and diagnostics
  • Export commands from the editor
  • Theme support with workspace CSS
---
marp: true
---

CLI workflow

Marp CLI converts decks from the terminal.

npx @marp-team/marp-cli slides.md --html
npx @marp-team/marp-cli slides.md --pdf
npx @marp-team/marp-cli slides.md --pptx
npx @marp-team/marp-cli --watch slides.md
npx @marp-team/marp-cli --server .

Chrome/Chromium powers PDF and PowerPoint export paths.

Ecosystem layers

Layer Role
Marpit Minimal Markdown + CSS slide framework
Marp Core Official themes, math, emoji, auto-scaling, Marp flavor
Marp CLI Terminal conversion, watch/server, export templates
Marp for VS Code Authoring, preview, completions, export
Your app Custom renderer, navigation, plugins, hosting

Practical starter template

---
marp: true
theme: gaia
class: invert
paginate: true
size: 16:9
style: |
  section.lead { text-align: center; }
---

<!-- _class: lead invert -->

# Talk title

Speaker · Event

---

# The story

- Context
- Tension
- Resolution

Feature quick reference

Need Use
New slide --- horizontal ruler
Deck config YAML front matter
One-slide override _directive spot directive
Reveal items * bullets or 1) ordered items
Full-bleed image ![bg cover](image)
Split layout ![bg right:40%](image)
Two columns CSS grid/flex or HTML
Big title # <!-- fit --> Title
Notes Non-directive HTML comments
Custom look style directive or custom theme CSS

Build slides with Markdown

Start simple, add directives only when the story needs them.

https://marp.app/

This is a real presenter note captured by Marp, not displayed on the slide.