Skip to main content

How to Use Marp Extension in VS Code

Quick guide to create your PowerPoint presentation using the Marp extension you just installed.

🚀 Quick Start (3 Steps)​

Step 1: Open the Marp File​

  1. In VS Code, open the file: presentation/PRESENTATION_MARP.md
  2. You should see the Markdown content with --- separators

Step 2: Preview the Presentation​

Option A: Click the Preview Button

  • Look for the "Open Preview to the Side" button in the top-right corner
  • It looks like a split-screen icon with "Marp" label
  • Click it to see live preview

Option B: Use Command Palette

  1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
  2. Type: Marp: Open Preview
  3. Press Enter

Option C: Right-Click

  1. Right-click anywhere in the Markdown file
  2. Select Marp: Open Preview to the Side

Step 3: Export to PowerPoint​

  1. In the preview window, click the menu icon (three dots) in top-right
  2. Select "Export Slide Deck..."
  3. Choose "PowerPoint (PPTX)"
  4. Choose where to save the file
  5. Done! You now have a PowerPoint file

📊 What You'll See​

In the Editor (Left Side)​

---
marp: true
theme: default
---

# Slide Title
Content here

---

# Next Slide
More content

In the Preview (Right Side)​

  • Live presentation slides
  • Navigation controls at bottom
  • Slide counter (e.g., "1 / 35")
  • Full-screen button

🎮 Navigation Controls​

In Preview Window​

Mouse:

  • Click left/right arrows at bottom
  • Click slide number to jump to specific slide
  • Click full-screen icon for presentation mode

Keyboard:

  • → or Space - Next slide
  • ← - Previous slide
  • Home - First slide
  • End - Last slide
  • F11 - Full screen

📝 Editing Tips​

Live Updates​

  • Any changes you make in the Markdown file
  • Will automatically update in the preview
  • No need to refresh!

Slide Separators​

# Slide 1
Content

---

# Slide 2
More content
  • Each --- creates a new slide
  • Must be on its own line

Special Slide Classes​

<!-- _class: lead -->
# Centered Title Slide
  • lead - Centers content, larger text
  • invert - Dark background, light text

🎨 Customization​

Change Theme​

At the top of PRESENTATION_MARP.md:

---
marp: true
theme: default  # Change to: gaia, uncover
---

Available themes:

  • default - Clean, professional (current)
  • gaia - Modern, colorful
  • uncover - Minimalist, elegant

Change Colors​

---
marp: true
theme: default
backgroundColor: #f0f0f0
color: #333
---

Custom Styling​

---
marp: true
style: |
  section {
    background-color: #0078d4;
  }
  h1 {
    color: white;
  }
---

📤 Export Options​

1. PowerPoint (PPTX) ⭐ Recommended​

  • Click menu → Export → PowerPoint
  • Fully editable in PowerPoint
  • Best for sharing with team

2. PDF​

  • Click menu → Export → PDF
  • Good for printing
  • Preserves exact layout

3. HTML​

  • Click menu → Export → HTML
  • Self-contained web page
  • Can present in browser

4. PNG Images​

  • Click menu → Export → PNG
  • One image per slide
  • Good for documentation

🔧 Troubleshooting​

Problem: "No preview button visible"​

Solution:

  1. Make sure file starts with: 
    ---
    marp: true
    ---
  2. Save the file (Ctrl+S)
  3. Restart VS Code if needed

Problem: "Preview shows Markdown, not slides"​

Solution:

  • Check that marp: true is in the frontmatter
  • Make sure Marp extension is enabled
  • Try closing and reopening the preview

Problem: "Export button is grayed out"​

Solution:

  • Make sure preview is open
  • Click in the preview window first
  • Try using Command Palette: Marp: Export Slide Deck

Problem: "Slides look wrong"​

Solution:

  • Check slide separators are --- on their own line
  • Verify Markdown syntax is correct
  • Try different theme to see if it's a styling issue

💡 Pro Tips​

1. Use Speaker Notes​

# Slide Title
Content here

<!--
These are speaker notes
They won't appear on the slide
But you can see them in presenter mode
-->

2. Add Images​

# Slide with Image
![width:500px](path/to/image.png)

# Background Image
![bg](path/to/background.png)

3. Two-Column Layout​

<div class="columns">
<div>

## Left Column
Content here

</div>
<div>

## Right Column
More content

</div>
</div>

4. Code Highlighting​

# Code Example
\`\`\`python
def hello():
    print("Hello, World!")
\`\`\`

5. Presenter Mode​

  • Export to HTML
  • Open in browser
  • Press P for presenter view
  • Shows current slide + next slide + notes

✅ Checklist for Your Presentation​

  • Open presentation/PRESENTATION_MARP.md in VS Code
  • Click "Open Preview to the Side" button
  • Review all 35+ slides in preview
  • Make any edits needed (auto-updates in preview)
  • Click menu → Export → PowerPoint (PPTX)
  • Save as Documentation_System_Presentation.pptx
  • Open in PowerPoint to verify
  • Customize further in PowerPoint if needed
  • You're ready to present! 🎤

📚 Additional Resources​

Marp Documentation:

VS Code Extension:

Keyboard Shortcuts:

  • Ctrl+Shift+P → Marp: Open Preview
  • Ctrl+Shift+P → Marp: Export Slide Deck

🎯 Summary​

You have everything you need:

  1. ✅ Marp extension installed
  2. ✅ Presentation file created (PRESENTATION_MARP.md)
  3. ✅ 35+ slides ready to present
  4. ✅ This guide for reference

Next steps:

  1. Open PRESENTATION_MARP.md
  2. Click preview button
  3. Export to PowerPoint
  4. Present! 🎉

Need Help?

  • Check this guide
  • See presentation/README_PRESENTATION.md
  • Marp documentation: https://marp.app/

Last Updated: 2025-11-28

Build StatusBuild #20251224.44 | Commit: 2544997 | Branch: HEAD | Built: 12/24/2025, 4:40:09 PM