Marp Slide

Automate Markdown-based slide deck creation and presentation workflow integration

Marp Slide is an AI skill that enables creating presentation slides using Markdown syntax through the Marp ecosystem. It covers slide authoring with Markdown directives, theme customization, code highlighting, image positioning, PDF and HTML export, and presenter note workflows that let developers build presentations without leaving their text editor.

What Is This?

Overview

Marp Slide provides tools for building professional presentations entirely in Markdown files. It handles converting Markdown documents into slide decks with page breaks, applying built-in and custom themes for consistent visual styling, embedding code blocks with syntax highlighting, positioning images using CSS directives within Markdown, exporting decks to PDF, HTML, and PowerPoint formats, and adding presenter notes for speaker view.

Who Should Use This

This skill serves developers who prefer writing in Markdown over graphical slide tools, conference speakers preparing technical talks with code examples, educators creating lecture materials with programming demonstrations, and teams that want version controlled presentations in Git repositories.

Why Use It?

Problems It Solves

Traditional slide tools like PowerPoint and Google Slides are inefficient for code heavy presentations, requiring manual formatting of every snippet. Binary presentation files cannot be meaningfully diffed or merged in version control. Maintaining visual consistency across slides requires repetitive formatting.

Core Highlights

Markdown authoring means slides live in plain text files that work with any editor and version control system. Automatic syntax highlighting formats code blocks without manual styling. Theme directives apply consistent design from a single configuration. Multi-format export produces PDF, HTML, and PPTX.

How to Use It?

Basic Usage

---
marp: true
theme: default
paginate: true
header: "Building REST APIs"
footer: "Tech Conference 2024"
---

A practical guide to production-ready endpoints

---

## Project Structure

```text
src/
  routes/
    users.js
    orders.js
  middleware/
    auth.js
    validate.js
  app.js

Keep route handlers thin by delegating to service layers

Route Definition

const express = require("express");
const router = express.Router();

router.get("/users/:id", async (req, res) => {
  const user = await UserService.findById(req.params.id);
  if (!user) return res.status(404).json({
    error: "User not found"
  });
  res.json(user);
});

module.exports = router;

Error Handling Middleware

function errorHandler(err, req, res, next) {
  const status = err.statusCode || 500;
  res.status(status).json({
    error: err.message,
    code: err.code || "INTERNAL_ERROR"
  });
}

app.use(errorHandler);

Centralize error responses for consistent API behavior

Questions?

github.com/example/rest-api-demo


### Real-World Examples

```javascript
const { Marp } = require("@marp-team/marp-core");
const fs = require("fs");

class SlideBuilder {
  constructor(options = {}) {
    this.marp = new Marp({
      html: options.allowHtml || false,
      math: options.enableMath || false,
    });
  }

  renderToHtml(markdownPath) {
    const content = fs.readFileSync(markdownPath, "utf-8");
    const { html, css } = this.marp.render(content);
    const fullHtml = `<!DOCTYPE html>
<html>
<head><style>${css}</style></head>
<body>${html}</body>
</html>`;
    return fullHtml;
  }

  extractSlideCount(markdownPath) {
    const content = fs.readFileSync(markdownPath, "utf-8");
    const slides = content.split(/
---
/);
    return slides.length;
  }

  addPresenterNotes(markdownPath, slideIndex, notes) {
    const content = fs.readFileSync(markdownPath, "utf-8");
    const slides = content.split("
---
");
    if (slideIndex < slides.length) {
      slides[slideIndex] += "

<!--
" + notes + "
-->";
    }
    return slides.join("
---
");
  }
}

module.exports = { SlideBuilder };

Advanced Tips

Use the  directive to create title slides with centered text. Define custom themes in CSS files referenced by the theme front matter directive for branded presentations. Split long presentations into multiple Markdown files and concatenate them during the build step.

When to Use It?

Use Cases

Use Marp Slide when preparing conference talks with extensive code examples, when creating internal documentation that doubles as a presentation, when building training materials that need version control, or when generating slide decks programmatically from templates.

Important Notes

Requirements

Node.js runtime for the Marp CLI and core library. A Markdown editor or IDE with Marp preview extensions for live feedback. Chromium based rendering engine for PDF export, bundled automatically by the Marp CLI.

Usage Recommendations

Do: use front matter directives at the top of each Markdown file to configure theme, pagination, and headers. Keep one concept per slide to maintain audience focus. Use presenter notes in HTML comments for speaking points.

Don't: embed large images directly in the Markdown repository without optimizing file sizes first. Override theme styles with inline CSS on every slide, as this defeats the purpose of centralized theming. Cram too much code onto a single slide, as audiences cannot read dense code at presentation distance.

Limitations

Complex animations and transitions from PowerPoint are not supported in Marp's Markdown based format. Custom layouts beyond CSS capabilities require a more flexible framework. Live code execution during presentations needs separate tooling, as Marp renders static slides.

More Skills You Might Like

Explore similar skills to enhance your workflow