Sample Presentation

A template demonstrating Marp best practices

Speaker Notes and Lists

  • Use HTML comments for speaker notes
  • Notes are visible in presenter view
  • Keep bullet points concise

Speaker Notes with Images

Image

Centered Images

Use ![center] alt text to center images

center

Blockquotes

"Keep slides concise with key points only."

— Marp Best Practices

Tables

Feature Description
Themes Built-in and custom CSS
Images Background and inline
Export HTML, PDF, PPTX

Two-Column Layout

Left Column

  • Point 1
  • Point 2
  • Point 3

Right Column

  • Point A
  • Point B
  • Point C

Two-Column Layout (Class)

Left Column

  • Point 1
  • Point 2
  • Point 3

Right Column

  • Point A
  • Point B
  • Point C

Background with Opacity

Use ![bg opacity:0.3] for subtle backgrounds

Dark Slide (Invert)

Use <!-- _class: invert --> for dark themed slides

  • Great for emphasis
  • Improved contrast for certain content
  • Works with code blocks too

Math Equations

Inline:

Block equation:

Social Icons

GitHub
LinkedIn
Mastodon
Bluesky
YouTube
Blog

Auto-fit Text

Use <!--fit--> to scale text to slide width

Mermaid Diagrams

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

draw.io Diagrams

Editable .drawio.svg files render as images and reopen in draw.io

center

Code Blocks

// Syntax highlighting works out of the box
const greeting = (name) => {
  return `Hello, ${name}!`;
};

Dense Content (Small Text)

Use <!-- _class: small --> for slides with more content

Method Description Returns
GET Retrieve resource 200 OK
POST Create resource 201 Created
PUT Update resource 200 OK
DELETE Remove resource 204 No Content
  • Additional bullet points fit better
  • More information per slide when needed
  • Use sparingly for readability

Thank You!

Questions?

Speaker notes go in HTML comments like this

You can have multiple comment blocks on a slide

Multiline speaker notes work too. This will all appear in presenter view.

Built with the drawio-diagrams skill from img/pipeline.spec.json. Use Mermaid for quick inline diagrams; use draw.io when the figure must stay editable in a visual editor.