Marp in VS Code: preview, export, themes, settings

By Ekrem Çetinkaya · Published 13 September 2026

Marp for VS Code turns any Markdown file with marp: true in its front matter into a slide preview inside the editor, exports it to PDF, PPTX, HTML or images from a toolbar button, and loads your own theme CSS through the markdown.marp.themes setting. It has no presenter view of its own: present from the exported HTML (press P) or from another tool.

This guide is the setup for a course: install, the preview, the export button and its settings, a custom theme registered per workspace, the settings that matter for lecture decks (HTML, math, PDF notes, overflow warnings), and what to reach for when the extension stops short. Settings are from version 3.6 of the extension.

Install and enable

Install Marp for VS Code from the Extensions view. Open a Markdown file, add the front matter, and the preview (⇧⌘V on a Mac, Ctrl+Shift+V elsewhere) shows slides instead of a document:

---
marp: true
paginate: true
---

# First slide

The Marp icon in the editor title bar has Toggle Marp feature for current Markdown if you prefer not to edit the front matter, and New untitled Marp Markdown for a blank deck.

Preview

The preview is Marp Core's rendering, the same as marp-cli's, so what you see is what the PDF will be. Line breaks in a paragraph become <br> by default (markdown.marp.breaks), which is convenient for slides and different from plain Markdown. The Outline view lists the slides, and the setting markdown.marp.diagnostics.slideContentOverflow (off by default) adds a warning when a slide's content runs past the safe area; turn it on for a lecture deck.

Export

Export slide deck… from the Marp icon (or the command palette) writes the deck in the format set by markdown.marp.exportType: pdf by default, or html, pptx, png, jpeg, or txt for the notes alone. The exports that need a browser (PDF, PPTX, images) use an installed Chrome, Edge or Firefox; markdown.marp.browser picks which and markdown.marp.browserPath points at an unusual install.

Settings worth changing for a course:

• markdown.marp.pdf.noteAnnotations: true puts the speaker notes into the PDF as annotations.
• markdown.marp.pdf.outlines: headings or both gives the PDF a bookmark tree, which students appreciate.
• markdown.marp.pptx.editable: off by default; on or smart produces editable PPTX (needs LibreOffice, drops notes, lower fidelity).
• markdown.marp.exportAutoOpen: false if you export often and do not want the file opened every time.

Images kept in the workspace next to the deck come through in the exports; markdown.marp.strictPathResolutionDuringExport controls whether paths resolve from the workspace root. If an image is missing from a PDF, check the path first, then that the file is inside the workspace.

A custom theme for the course

Keep a theme file in the repository (themes/cs101.css, starting with /* @theme cs101 */) and register it in the workspace settings (.vscode/settings.json) so everyone who clones the course gets it:

{
  "markdown.marp.themes": ["./themes/cs101.css"]
}

Then theme: cs101 in each deck. Remote URLs work too. The preview and every export use the registered theme; marp-cli needs --theme-set themes/ to do the same outside VS Code.

HTML and math

• markdown.marp.html: default renders Marp's allowlist (a div with a class is fine, inline style attributes are stripped); all renders everything; off renders none. Lecture decks with column layouts work at default; decks with inline styles need all.
• markdown.marp.mathTypesetting: mathjax by default, katex or off. The math: directive in a deck's front matter overrides the setting for that deck.

What the extension does not do

• Present. There is no presenter view in VS Code. Export to HTML and open it in a browser: P opens the presenter view with notes and a timer, and the exported HTML also opens in VS Code's own browser tab (markdown.marp.openExportedHtmlInIntegratedBrowser). Or present from the PDF.
• Diagrams from text. Mermaid blocks are not rendered; export the diagram to SVG and include it as an image, or use a marp-cli engine script with the plugin.
• Manage a course. The extension edits one file; the folder structure, the sources and the notes are yours to keep.

In Lecture Studio

Lecture Studio uses the same Marp Core rendering in its preview, ships two themes and a scaffold per deck type, and adds what the extension leaves out for teaching: a presenter mode with an audience window, speaker notes and a break countdown; a library of courses and units on disk; readings the assistant searches and cites when it writes the deck. Decks stay plain Marp files, so a course can be edited in VS Code and presented in Lecture Studio, or the other way round. The app runs on macOS 15 or later; the assistant needs an Oberik project key. PDF and PPTX come from marp-cli or the VS Code extension, not from the app.

FAQ

How do I preview Marp slides in VS Code?

Install Marp for VS Code, add marp: true to the file's front matter, and open the Markdown preview; it renders slides.

How do I export Marp to PDF from VS Code?

Export slide deck… from the Marp icon in the editor title. markdown.marp.exportType sets the default format; a browser must be installed for PDF.

How do I use a custom theme in Marp for VS Code?

Add the CSS file's path to markdown.marp.themes in the workspace settings and set theme: name in the deck, where the name is the /* @theme name */ comment in the file.

Does Marp for VS Code have a presenter view?

No. Export to HTML and press P in the browser for presenter view with notes and a timer, or present from a tool that has one.