Marp cheat sheet

File shape

---
marp: true
theme: default        # default · gaia · uncover · your theme's @theme name
paginate: true
size: 16:9            # or 4:3
header: "Course · Week"
footer: "Source line"
math: mathjax         # or katex, or false
style: |
  section { font-size: 22px; }
---

# First slide

---

## Second slide

<!-- speaker notes: any comment that is not a directive -->

Global directives (front matter, whole deck)

Directive	Values	Notes
marp	true	Required in VS Code; marp-cli treats any file as a deck.
theme	name	Built-in default, gaia, uncover, or a theme loaded with --theme-set.
size	16:9, 4:3	Marp Core; 1280×720 or 960×720.
paginate	true	Page numbers, bottom right in the built-in themes.
header, footer	string	Inline Markdown allowed, including .
math	mathjax, katex, false	MathJax is the default since Marp Core 3.
style	CSS (| block)	Deck-wide CSS without a theme file.
headingDivider	2 or [1, 2]	Start a new slide at each heading of that level; no --- needed.
title, description, author, keywords, image, url	string	Metadata for the HTML export.
lang	BCP 47	Language of the deck.
transition	name	marp-cli HTML export only: fade, slide, cover, … (see the transitions guide).

Per-slide directives (HTML comment, underscore = this slide only)

Directive	Effect
<!-- _class: lead -->	Adds a class to the slide's section; lead centres in the built-in themes, invert flips colours in gaia and uncover.
<!-- _paginate: false -->	Hide the number (still counted). skip: hide and do not count. hold: show the previous number.
<!-- _header: "" -->, <!-- _footer: "" -->	Replace or clear the header/footer for this slide.
<!-- _backgroundColor: #f5f5f5 -->	Background colour. Also _backgroundImage, _backgroundPosition, _backgroundRepeat, _backgroundSize.
<!-- _color: white -->	Text colour.
<!-- _transition: fade -->	Transition into this slide (marp-cli HTML).
Without the underscore	The directive applies from this slide to the end of the deck.

Images

Write	Effect
, , 	Size (any CSS length).
	Background image, cover by default. Keywords: contain/fit, auto, 60%.
, 	Split: image on one side, content on the other.
 	Several backgrounds side by side; ![bg vertical] stacks them.
	Filters: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia.
Centring	No keyword; in the theme: img[alt~="center"] { display: block; margin: 0 auto; } then .

Text and layout

Want	Write
Fit a heading to one line	# <!-- fit --> Long title (Marp Core)
Font size, whole deck	style: | section { font-size: 22px; } in the front matter
Font size, one slide	<style scoped>section { font-size: 18px; }</style>
Two columns	<div class="columns"><div class="column">…</div><div class="column">…</div></div> with .columns { display: flex; gap: 24px } .column { flex: 1 }; blank lines inside each div
Table	GFM pipes; size with section table { font-size: 18px }
Code	Fenced block with a language; highlight.js built in. Size with section pre { font-size: 16px }
Math	$x^2$ inline, $$ … $$ block, \begin{aligned} for multi-line
Emoji	:tada: shortcodes; Unicode emoji become twemoji images (jsDelivr CDN) by default
Speaker notes	<!-- text -->; several comments on a slide are joined
Inline HTML	Elements with a class render by default (Marp Core 4); inline style="", id, iframes and scripts need --html

Themes

/* @theme cs101 */
@import 'default';
section { font-size: 20px; text-align: left; justify-content: flex-start; }
section.divider { justify-content: center; }
section::after { content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total); }
header, footer { font-size: 14px; color: #666; }

Use with theme: cs101; load with marp --theme-set themes/ or VS Code's markdown.marp.themes. The theme builder writes one.

marp-cli

npm i -g @marp-team/marp-cli
marp deck.md                  # deck.html
marp deck.md --pdf            # deck.pdf
marp deck.md --pptx           # image slides + notes; --pptx-editable needs LibreOffice, drops notes
marp deck.md --images png     # one PNG per slide
marp deck.md --notes          # notes as text; --pdf-notes adds them as PDF annotations
marp deck.md --allow-local-files   # needed for local images in PDF/PPTX
marp deck.md --theme-set themes/   # custom themes
marp deck.md --html           # allow all HTML (inline styles, iframes)
marp -w deck.md               # watch;  -s dir  serves a folder;  -p  preview window
marp -I slides -o dist        # convert a whole folder
marp deck.md --pdf-outlines   # PDF bookmarks
marp --engine ./engine.js     # markdown-it plugins (e.g. mermaid)
# config: .marprc (JSON/YAML) or marp.config.js next to the deck

Marp for VS Code (settings)

Setting	Values
markdown.marp.themes	paths or URLs of theme CSS files
markdown.marp.html	off, default (allowlist), all
markdown.marp.mathTypesetting	mathjax, katex, off
markdown.marp.exportType	pdf, html, pptx, png, jpeg, txt
markdown.marp.pdf.noteAnnotations, markdown.marp.pdf.outlines	notes in the PDF; bookmarks off/pages/headings/both
markdown.marp.pptx.editable	off, on, smart
markdown.marp.breaks	line breaks in paragraphs: on by default
markdown.marp.diagnostics.slideContentOverflow	warn on overflow (off by default)
Command	Marp: Export Slide Deck…; no presenter view in VS Code, press P in the exported HTML

Presenting the HTML export

Key	Does
→ ← Space PageDown/Up	Next / previous slide
F	Full screen
P	Presenter view (notes, next slide, timer) in a new window
O or Esc	Overview of all slides

Try any of this in the online editor. Guides: tutorial, images, columns, math, header, footer, page numbers, font size, themes, export, VS Code.

Questions

What is Marp?

Marp (Markdown Presentation Ecosystem) renders a Markdown file into slides: --- separates slides, HTML comments carry directives and speaker notes, and marp-cli or the VS Code extension export HTML, PDF and PPTX.

How do I start a Marp file?

A front matter block with marp: true, then slides separated by ---. Try it in the online editor.

Where is the full documentation?

Marpit's Markdown reference (marpit.marp.app/markdown), Marp Core's README for its extras (fitting headers, math, emoji, size), and marp-cli's README for the flags. This page condenses the parts a slide author needs.