Marp CLI

repository·main·Indexed 25 days ago

https://github.com/marp-team/marp-cli

A command-line interface for converting Marp and Marpit Markdown files into HTML, PDF, PowerPoint (PPTX), and images. It features a 'bespoke' HTML template supporting slide transitions via the View Transition API, custom CSS keyframe animations, and morphing effects. Marp CLI can be installed via npm, Homebrew, Scoop, standalone binaries, or Docker, and supports one-shot conversions using npx.

Tokens
17.4K
Snippets
44
Records
96
Agent score
86%

What's inside marp-cli

  1. Convert Markdown to HTML

    main

    By default, passing a Markdown file to Marp CLI converts it to an HTML file. Use the --output (-o) option to specify a custom output path.

    To convert multiple files or directories while maintaining the original directory structure, use the --input-dir (-I) option along with --output to specify the destination directory.

  2. Use Watch mode to auto-convert changes

    main
    Enable Watch mode using the --watch (-w) option. Marp CLI will observe changes to Markdown files and theme CSS files. Whenever a file is updated, a new conversion is triggered. If you are viewing the converted HTML in a browser, the page will refresh automatically.
  3. Manage slide layer order during transitions

    main

    By default, the incoming slide layer is always stacked on top of the outgoing slide layer. If your transition requires the incoming slide to appear behind the outgoing one, you can manipulate the z-index within your @keyframes.

    Note that z-index must be an integer; interpolated values in animations will not use decimal points.

    /* Send the incoming slide to the back */
    @keyframes marp-incoming-transition-XXXXXXXX {
      from,
      to {
        z-index: -1;
      }
    }
    
    /* Swap layer order during animation */
    @keyframes marp-incoming-transition-swap {
      from {
        z-index: -1;
      }
      to {
        z-index: 0;
      }
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(50%);
      }
      100% {
        transform: translateX(0);
      }
    }
  4. Create custom slide transitions using CSS keyframes

    main

    You can define custom transitions and animations using standard CSS @keyframes. Marp uses specific naming conventions to identify these transitions. If a custom transition has the same name as a built-in one, Marp prefers the custom one.

    Simple Transitions

    To define a simple transition, use the keyframe name format: marp-transition-XXXXXXXX. When triggered, the current slide animates with this keyframe, and the new slide animates in the opposite direction automatically.

    Split Animations (Outgoing and Incoming)

    For more control, you can define separate animations for the disappearing slide and the appearing slide using these prefixes:

    • marp-outgoing-transition-XXXXXXXX: The disappearing animation.
    • marp-incoming-transition-XXXXXXXX: The appearing animation.

    Setting Default Duration

    Custom transitions default to 0.5s. To change this, set the --marp-transition-duration CSS property within the first keyframe (from or 0%).

    /* Define `dissolve` transition */
    @keyframes marp-transition-dissolve {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    
    /* Define `slide-up` transition with split animations */
    @keyframes marp-outgoing-transition-slide-up {
      from {
        transform: translateY(0%);
      }
      to {
        transform: translateY(-100%);
      }
    }
    @keyframes marp-incoming-transition-slide-up {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0%);
      }
    }
    
    /* Set custom duration */
    @keyframes marp-incoming-transition-gate {
      from {
        --marp-transition-duration: 1s;
        clip-path: inset(0 50%);
      }
      to {
        clip-path: inset(0);
      }
    }
  5. Use Server mode for on-demand conversion

    main

    Server mode allows on-demand conversion via HTTP requests. Use the --server (-s) option followed by a directory to serve. In this mode, files are converted on-the-fly and served via HTTP rather than being written to disk.

    To get specific formats, add a query string to the request:

    • http://localhost:8080/deck-a.md?pdf returns a PDF.
    • Other supported formats via query string: pdf, pptx, png, jpeg, txt.

    Configuration:

    • Set the server port using the PORT environment variable (e.g., PORT=5000 marp -s ./slides).
    • To serve a default deck at the root (/), place a file named index.md or PITCHME.md in the served directory.
    PORT=5000 marp -s ./slides
  6. Convert Markdown to PowerPoint (PPTX)

    main

    Convert Markdown to PPTX using the --pptx flag or by specifying a .pptx extension in the --output path. This requires a browser.

    Experimental: Editable PPTX Use --pptx-editable alongside --pptx to generate a PPTX where text, shapes, and images can be modified in a GUI.

    • Requirements: Requires both a browser and LibreOffice Impress.
    • Warnings: This mode has lower reproducibility, does not support presenter notes, and may fail with complex themes (e.g., gaia).
    # Standard PPTX conversion
    marp --pptx slide-deck.md
    marp slide-deck.md -o converted.pptx
    
    # Experimental editable PPTX
    marp --pptx --pptx-editable slide-deck.md
  7. Configure Marp CLI with a configuration file

    main

    Marp CLI can be configured using several file formats to set project-wide settings. Supported files include:

    • marp.config.js
    • marp.config.mjs (ES Modules)
    • marp.config.cjs (CommonJS)
    • .marprc (JSON or YAML)
    • The marp section within package.json

    By default, Marp CLI looks for a configuration file in the current directory. You can specify a custom path using the --config-file (--config or -c) option. To prevent the CLI from looking for a configuration file, use the --no-config-file (--no-config) option.

    // package.json
    {
      "marp": {
        "inputDir": "./slides",
        "output": "./public",
        "themeSet": "./themes"
      }
    }
  8. Convert Markdown to Images (PNG/JPEG)

    main

    Marp CLI can convert slides into images using the --images or --image options. This requires a browser.

    • Multiple images: Use --images [png|jpeg] to convert every slide into a separate file (e.g., slide-deck.001.png).
    • Single title slide: Use --image [png|jpeg] or specify a .png/.jpeg extension in --output to convert only the first page.
    • Scale factor: Use --image-scale <number> to increase resolution (e.g., --image-scale 2). This also affects PPTX conversion quality.
  9. Respect user motion preferences in bespoke transitions

    main
    The bespoke template automatically respects the user's operating system settings for reducing motion. If a browser detects the prefers-reduced-motion preference, all transition effects are automatically replaced with a simple fade animation to assist users with vestibular disorders.
  10. Use Preview window for immediate results

    main
    Use the --preview (-p) option to open preview window(s) that show the converted result immediately. This mode automatically enables Watch mode. Note that --preview cannot be used when running Marp CLI through the official Docker image.
  11. Run Marp CLI without installation using npx

    main

    If you have Node.js v18 or later installed, you can use npx to run the latest version of Marp CLI for one-shot conversions without a permanent installation.

    Note: Converting to PDF, PPTX, or images requires a compatible browser (Google Chrome, Microsoft Edge, or Mozilla Firefox) to be installed on your system.

    # Convert slide deck into HTML
    npx @marp-team/marp-cli@latest slide-deck.md
    npx @marp-team/marp-cli@latest slide-deck.md -o output.html
    
    # Convert slide deck into PDF
    npx @marp-team/marp-cli@latest slide-deck.md --pdf
    npx @marp-team/marp-cli@latest slide-deck.md -o output.pdf
    
    # Convert slide deck into PowerPoint document (PPTX)
    npx @marp-team/marp-cli@latest slide-deck.md --pptx
    npx @marp-team/marp-cli@latest slide-deck.md -o output.pptx
    
    # Watch mode
    npx @marp-team/marp-cli@latest -w slide-deck.md
    
    # Server mode (Pass directory to serve)
    npx @marp-team/marp-cli@latest -s ./slides