Markdown Slides Tutorial — Marp, Slidev, Reveal.js Comparison and Guide

Why Use Markdown for Slides

If you've written technical documentation or a README, you're probably already comfortable with Markdown. Using Markdown for presentations comes down to two core benefits: version-controllable text files and speed of writing.

The traditional PPT workflow goes something like this: open PowerPoint or Keynote, drag elements around, adjust font colors, align objects... Before you know it, you've spent more time on layout than on actual content. Markdown slides flip that equation — you focus on the content, and the tool handles the layout.

Here's a real example. I once had to do an internal tech talk that involved several code snippets. Inserting code blocks in PowerPoint was a nightmare — formatting would break, indentation would get mangled on paste. I switched to Marp, wrote the code directly in Markdown code fences, exported to PDF, and was done. Syntax highlighting and fonts were all handled automatically. The whole process from opening my editor to a finished PDF took about 20 minutes.

That said, Markdown slides have their limits. If you need pixel-perfect layout control, complex chart arrangements, or the kind of visual impact expected in a sales deck, traditional tools are still the better choice. But for tech talks, internal reports, teaching materials, and similar scenarios, markdown presentation tools are more than capable.

Three Mainstream Tools at a Glance

The three most popular markdown slides tools in the community, each with its own focus:

Feature	Marp	Slidev	Reveal.js
Positioning	Markdown converter	Vue+Vite slide app	HTML presentation framework
Learning curve	Lowest	Medium	Higher
Export formats	HTML/PDF/PPTX/Images	HTML/PDF	HTML/PDF
Interactivity	Mostly static	Animations, Vue components	Plugins, iframe embedding
Best for	Quick reports, fast drafting	Tech talks, code demos	High customization, academic
Node.js required	No (CLI can be standalone)	Yes	Yes

In short: want the fastest path to done? Marp. Want flashy interactive demos? Slidev. Want maximum flexibility? Reveal.js.

Let's walk through how to use each one.

Creating Slides with Marp

Marp is the easiest to pick up of the three. Its core philosophy is simple: one .md file = one slide deck.

Installing Marp

The easiest way is to install the VS Code extension — search for "Marp for VS Code" in the extension marketplace and install it. After that, open any .md file and you'll see a Marp preview icon in the top right corner. Click it to preview your slides in real time.

If you prefer the command line, you can install the Marp CLI:

# macOS
brew install marp-cli

# npm
npm install -g @marp-team/marp-cli

Basic Syntax

Marp uses --- to separate slides. Add marp: true to the frontmatter to enable Marp mode:

---
marp: true
---

# My First Slide

A presentation made with Marp

---

# Page Two

- List item 1
- List item 2
- List item 3

That's it. Everything between --- markers becomes one slide.

Marp Directives

Marp uses HTML comments to add layout directives. For example, changing page layout or setting background colors:

---
marp: true
---

<!-- _class: lead -->

# Centered Title Page

---

<!-- _paginate: true -->
<!-- _backgroundColor: #f0f0f0 -->

# Page with Page Numbers

This page has a light gray background and page numbers in the bottom right.

Common directives:

 — center content (great for title slides)
 — show page numbers
 — set background color
 — set text color
 — add a header
 — add a footer

Directives with a leading underscore (like _class) apply only to the current slide; without the underscore, they apply to all subsequent slides.

Themes

Marp includes three built-in themes: default, gaia, and uncover. Set one in the frontmatter:

---
marp: true
theme: gaia
---

If you need a custom theme, you can write a CSS file. Marp uses the Marpit framework's CSS syntax, giving you fine-grained control over slide regions (title, body, header, footer). To be honest, custom themes have a steep learning curve — if you're not particular about visual style, the built-in themes are perfectly fine.

Exporting

Marp supports export to HTML, PDF, PPTX, and images. In VS Code, click the export button and choose your format, or use the CLI:

# Export to PDF
marp slides.md --pdf

# Export to PPTX
marp slides.md --pptx

# Export to HTML (open in browser for presentation)
marp slides.md --html

The PPTX export is genuinely useful — while the file might need some minor style tweaks after opening in PowerPoint, the text, images, and layout are all preserved. For scenarios where you need to share slides with others or do final polish in PowerPoint, this feature saves a lot of effort.

Building Interactive Presentations with Slidev

Slidev is a slide tool designed for developers, built on Vue and Vite. Its biggest advantages are live hot-reload and interactivity — you see changes in the browser as you write Markdown, and you can embed Vue components.

Installation and Setup

# Create a Slidev project
npm create slidev@latest

# Enter the project directory
cd slidev-project

# Start the dev server
npm run dev

After launch, your browser opens http://localhost:3030 with an editor view on the left and a preview on the right. Edits to the Markdown file refresh the preview in real time.

Basic Syntax

Slidev also uses --- for slide separation, but with richer frontmatter:

---
theme: default
background: https://example.com/bg.jpg
class: text-center
---

# Slidev Presentation

Developer-friendly slide tool

---

# Code Demo

```python
def hello():
    print("Hello, Slidev!")

Animation

Use <v-click> tags to control when elements appear

This text only appears after clicking


### Presenter Mode

Slidev has a feature I particularly love — presenter mode. Navigate to `http://localhost:3030/presenter` and you get a dual-screen view: current slide on one side, next slide + speaker notes on the other. This is incredibly useful during live presentations, arguably better than PowerPoint's presenter view since it runs in the browser and works across all platforms.

### Exporting

```bash
# Export to PDF
npx slidev export

# Export as static HTML (deployable to any server)
npx slidev build

Building Highly Custom Presentations with Reveal.js

Reveal.js is an HTML presentation framework where Markdown is just one of the supported content formats. Its strengths are maximum customization freedom and a rich plugin ecosystem.

Basic Usage

Reveal.js loads Markdown content through an HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/black.css">
</head>
<body>
  <div class="reveal">
    <div class="reveal-slides">
      <section data-markdown>
        <textarea data-template>
          # First Slide
          Reveal.js supports native Markdown

          ---

          ## Second Slide
          Use `---` to separate horizontal slides
        </textarea>
      </section>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/markdown/markdown.js"></script>
  <script>
    Reveal.initialize({ plugins: [RevealMarkdown] });
  </script>
</body>
</html>

You can also load external Markdown files:

<section data-markdown="slides.md"
         data-separator="---"
         data-separator-vertical="-->">
</section>

Plugin Ecosystem

Reveal.js has plenty of useful plugins:

RevealMarkdown — Markdown support
RevealHighlight — Code syntax highlighting
RevealMath — Math formula rendering (KaTeX/MathJax)
RevealNotes — Speaker notes
RevealZoom — Alt+click to zoom

The community also offers third-party plugins for real-time collaboration, progress bars, whiteboards, and more.

To be honest though, Reveal.js has a steeper learning curve than Marp and Slidev. You need to know some HTML/CSS/JS, and the configuration can be tedious. If you just want to quickly create a presentation, I wouldn't recommend starting with Reveal.js.

Alternative Solutions

Beyond the three mainstream tools above, there are some alternatives worth knowing about:

Pandoc + Reveal.js: If you already have Pandoc installed, you can convert Markdown to Reveal.js HTML with a single command:

pandoc slides.md -t revealjs -s -o presentation.html

The advantage is no Node.js setup needed — just Pandoc. The downside is limited customization, since you're using Reveal.js defaults.

presenterm: A terminal-based slide tool written in Rust. If you're a terminal enthusiast who works in Vim/Tmux, this tool renders Markdown slides directly in the terminal without a browser. It's still fairly basic, but good for quick internal sharing.

Quarto: A publishing system from Posit (formerly RStudio) with built-in Reveal.js support. Popular in academic circles. If you're already using R Markdown or working on data science reports, Quarto is a solid choice.

Choosing the Right Tool

At the end of the day, choosing a tool depends on your specific needs. Here's a simple decision path:

If you just want to create a decent slide deck as fast as possible, go with Marp. Install the VS Code extension and start writing. Export to PDF or PPTX — it's that simple. For 90% of tech talks and internal reports, Marp is more than enough.

If you're giving a tech talk with code demos and live examples, go with Slidev. The presenter mode and code highlighting experience are excellent, and Vue component support means you can embed interactive content in your slides. The tradeoff is needing Node.js and a higher learning curve.

If you need deep customization or are preparing academic presentations, go with Reveal.js. It has the most mature plugin ecosystem and can embed all kinds of external content (iframes, code sandboxes, math formulas). But you need to be willing to spend time on HTML/CSS configuration.

One practical piece of advice: don't obsess over which tool is "best." My habit is to use Marp for quick everyday decks and switch to Slidev for more formal tech talks. Tools are just means to an end — content is what matters.

Export Considerations

Regardless of which tool you use, there are a few things to watch out for when exporting:

PDF export: All three tools support it with good quality. Marp's PDF export is the most reliable. Slidev and Reveal.js rely on browser printing for PDF, which occasionally results in less-than-ideal page breaks.

PPTX export: Only Marp natively supports .pptx export. If you need to share slides for editing in PowerPoint, Marp is the easiest option. Just keep in mind that complex layouts (like multi-column) may need manual adjustment in PowerPoint after export.

Font rendering: I've encountered incomplete font rendering when exporting Marp PDFs, especially on Linux. The fix is to explicitly specify fonts in the theme CSS:

section {
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

With proper font configuration, exports render correctly. This one took me a while to figure out, but once the fonts are set up, it's smooth sailing.

Frequently Asked Questions

Can Markdown slides have animations?

Marp doesn't support animations — it produces static slides. Slidev and Reveal.js support transition animations and element reveal effects, but they can't match PowerPoint's extensive animation library. If you need heavy animation, Markdown slides might not be the right fit.

Can multiple people collaborate on editing?

Slidev doesn't have built-in collaboration. However, since Markdown files are plain text, you can combine Git with any online editor (GitHub Codespaces, VS Code Live Share) for collaboration. Reveal.js has a Multiplex plugin for multi-device presentation syncing (not collaborative editing).

Can I embed videos in slides?

Marp supports embedding video via HTML's <video> tag (in HTML export mode). Slidev and Reveal.js also support video embedding. However, if you export to PDF or PPTX, video cannot be embedded — this is a shared limitation of all markdown slides tools.

References

Marp Official Documentation — Marp toolchain overview and usage guide
Slidev Official Documentation — Slidev features and API reference
Reveal.js Markdown Documentation — Reveal.js Markdown support configuration
Marpit Framework Documentation — The CSS theme framework behind Marp
Slidev vs Marp vs Reveal.js Comparison — 2026 three-tool comparison analysis