Astro-Marp integration

Astro-Marp

astro-marp is a astro integration plugin that bring marp into astro, let user create presentaion from markdown.

Background

I’ve been using Marp to create presentations for several years. Last year, when I set up my personal blog with Astro, I immediately wanted to bridge the gap between Marp and Astro. Since Marp uses pure markdown files, they’re easy to modify, share, and track in version control. Astro is an excellent framework for hosting websites, making it perfect for viewing and presenting content freely.

However, at that time, neither the Astro community nor the Marp community had any plans for integration. I also lacked the knowledge to build such a complex project. But things turned around when AI coding tools gave me the courage to make it happen.

One important note: due to Astro’s internal restrictions, I had to configure the use of .marp as the file extension, but you can treat it as normal markdown and use standard markdown formatting.

How to Set up

• Install the plugin

  1
  npm install astro-marp

• Add the integration to astro.config.mjs

  1
  import { defineConfig } from 'astro/config';
  2
  import { marp } from 'astro-marp';
  3
  
  4
  export default defineConfig({
  5
    integrations: [
  6
      marp({
  7
        defaultTheme: 'am_blue',           // Built-in theme (am_blue, am_brown, am_dark, am_green, am_purple, am_red)
  8
        enableMermaid: true,               // Enable Mermaid diagram support (default: true)
  9
        mermaidStrategy: 'inline-svg',     // Mermaid rendering strategy (default: 'inline-svg')
  10
        debug: false,                      // Enable debug logging (default: false)
  11
      })
  12
    ]
  13
  });

• Create your marp file in a collection or in separate pages

  • in a single page like src/pages/my-first-presentaion.marp

  • in a collection

    • place marp files in src/content/presentations/,

    • define the collection in src/content/config.ts. here is what i use in this project

      1
      const slideSchema = z.object({
      2
        title: z.string(),
      3
        description: z.string(),
      4
        author: z.string(),
      5
        marp: z.boolean(),
      6
        pubDate: z.coerce.date(),
      7
        keywords: z.string().optional(),
      8
        url: z.string().optional(),
      9
        image: z.string().optional(),
      10
        theme: z.string().optional(),
      11
        updatedDate: z.coerce.date().optional(),
      12
      });

  • That’s it

how to write your presentation

You can write Marp presentations just like any other markdown file. For detailed guidance on Marp syntax and features:

• Follow the official Marp documentation
• Refer to the Marpit markdown guide

You can also view real examples I’ve created at slide, in addtion there a comletely example repository astro-marp-example