Marp Presentations in Git

The Art of Markdown-Based Slides

What is Marp?

Marp (Markdown Presentation Ecosystem) is a tool that allows you to create beautiful slide decks using standard Markdown.

• Developer Friendly: Write slides in your favorite editor.
• Git Integration: Perfect for version-controlled documentation.
• Customizable: Use CSS for styling.
• Portable: Export to HTML, PDF, or PPTX.

Basic Syntax

Slides are separated by three dashes (---).

# Slide 1
Content...

---

# Slide 2
Content...

Directives

Directives control the appearance and behavior of the presentation.

• marp: true: Enables Marp features.
• theme: Choose a built-in theme (e.g., default, gaia, uncover).
• paginate: Show page numbers.
• header / footer: Add consistent text to all slides.
• backgroundColor / color: Set global colors.

Text Auto-Scaling

Use the <!-- fit --> comment in a heading to make it automatically scale to fit the width of the slide.

THIS HEADING SCALES AUTOMATICALLY

Background Images

Marp supports powerful background image features.

• ![bg](url): Full background.
• ![bg left](url): Split screen (left side).
• ![bg right](url): Split screen (right side).
• ![bg brightness:0.5](url): Apply filters.

Math and Emoji

You can use KaTeX for math and standard emojis.

• Math:
• Emoji:

Custom Styling

Use the <style> tag or style directive to add custom CSS.

section {
  font-size: 30px;
}
h1 {
  color: #5b9bd5;
}

Scoped Styles

You can apply styles to specific slides using <style scoped>.

This slide has a different background color!

(Thanks to scoped CSS)

Interactive Elements

Since Marp exports to HTML, you can include interactive elements if your renderer supports them.

• Buttons
• Iframes
• Embedded charts (like Mermaid!)

Summary

Marp brings the "Docs as Code" philosophy to presentations.

1. Write in Markdown.
2. Commit to Git.
3. Present anywhere.

Related Tools

Check out other interactive documentation tools in this lab:

• Mermaid Diagrams in Git
• Lab Hub

Go forth and present!