Skip to content

Markdown Presentation & Slideshow Extension for VS Code

Technical presentations often duplicate material that already exists in Markdown documentation. Once copied into a slide editor, code samples and diagrams can drift away from the source.

I built the Markdown Presentation Tool to present the Markdown file directly in VS Code. The extension turns headings, lists, code blocks, and Mermaid diagrams into slides and updates the presentation when the source changes.

Navigate this post

Markdown Presentation Tool Demonstration

Key Capabilities & Advantages

The extension integrates directly into the editor interface to turn plain-text notes into formatted slides. Think of it like an automated teleprompter for technical talks: as you edit your document, the presentation view updates in real-time.

  • No Build Step
    Launches from the editor action bar without a separate build script or slide configuration file.

  • Live Updates
    Reflects text and code edits in the active slideshow pane.

  • :material-chart-diagram:{ .lg .middle } Native Mermaid Support
    Renders flowcharts, sequence diagrams, and architecture maps natively within slides.

  • Theme Awareness
    Adapts automatically to light and dark editor themes for cohesive visual appearance.

The extension uses HTML comment tags for slide breaks. Other Markdown renderers ignore those comments, so the source remains readable outside the presentation view.

  • Native Editor Integration: Operates directly inside VS Code without launching external browser windows or background node processes.
  • Full Markdown Rendering: Formats headings, blockquotes, ordered lists, and syntax-highlighted code blocks.
  • Rich Media Support: Embeds remote images, SVG assets, and interactive Mermaid.js diagrams.
  • Customizable Styling: Adjusts font scaling, content alignment, and slide background hex colors via editor settings.

Installation & Getting Started

Setting up the Markdown Presentation Tool requires zero build dependencies or external setup steps.

  1. Install the extension from the VS Code Marketplace.
  2. Open any Markdown (.md) document in the editor workspace.
  3. Launch the Slideshow:
  4. Click the Presentation Icon in the top-right editor action bar.
  5. OR open the Command Palette (++cmd+shift+p++ on macOS or ++ctrl+shift+p++ on Windows/Linux) and run Markdown: Show Markdown Presentation.

Quick Launch Shortcut

Assigning a custom keyboard shortcut to markdownPresentation.show allows toggling full-screen presentation mode instantly during engineering syncs or architecture reviews.

The presentation window supports standard keyboard navigation, mouse wheel scrolling, and visual touch targets.

Navigation Action Input Shortcut / Trigger Method
Next Slide ++right++, ++down++, ++pagedown++, ++space++, or Mouse Scroll Down
Previous Slide ++left++, ++up++, ++pageup++, or Mouse Scroll Up
Internal Slide Scroll ++shift++ + Mouse Scroll (for long content blocks)
On-Screen Navigation Clickable edge arrow overlays on display boundaries

Keyboard controls enable fluid slide transitions without relying on a mouse. For dense technical slides containing long code snippets, holding ++shift++ while scrolling allows panning through individual slide content without advancing to the next section.

Configuration Options

Customize presentation behavior and visual styling by opening VS Code Settings (++cmd+comma++ / ++ctrl+comma++) and filtering for Markdown Presentation Tool.

Setting Property Default Value Available Options Description
markdownPresentation.slide.mermaidTheme default default, dark, forest, neutral Controls Mermaid diagram rendering color theme
markdownPresentation.slide.headingAlignment left left, center, right Sets horizontal alignment for slide headings
markdownPresentation.slide.contentAlignment left left, center, right Sets horizontal alignment for body text and code
markdownPresentation.slide.fontSize medium small, medium, large Sets base typography size scaling
markdownPresentation.slide.backgroundColor (empty) Custom Hex Code (e.g. #1e1e1e) Overrides theme background color
markdownPresentation.slide.showCounter true true, false Toggles slide index counter in bottom-right corner
markdownPresentation.slide.showNavigationArrows true true, false Toggles persistent visual edge arrows

Configuring custom hex background colors and typography sizes allows matching your team's slide deck branding while keeping document sources in pure Markdown.

Creating Presentation Slides

Defining individual slides requires inserting standard HTML comment tags (<!-- slide -->) between content blocks.

presentation-example.md
<!-- slide -->

# Architecture Overview

Welcome to the technical design review deck!

<!-- slide -->

# System Data Flow

```mermaid
---
title: "Data Processing Pipeline"
---
flowchart TB
    accTitle: Markdown presentation data pipeline
    accDescr: The extension parses a Markdown source file and turns its content into an interactive slide deck.
    A["Markdown Source"] --> B["Extension Parser"]
    B --> C["Interactive Slide Deck"]

```

- Remote images and standard text blocks render automatically.

<!-- slide -->

Slide Delimiter Visibility

Because <!-- slide --> is a standard HTML comment tag, slide boundaries remain completely invisible in GitHub file previews and standard Markdown renderers, keeping source documentation clean.

Conclusion

The Markdown Presentation Tool bridges the gap between technical documentation and live presentations. By eliminating manual slide deck export steps and keeping presentation sources in plain-text Markdown files, engineering teams can present design notes, code architectures, and project updates directly from VS Code.

Keeping slide content in version-controlled Markdown ensures presentations stay synchronized with code repositories, removing the overhead of outdated PowerPoint decks.

References and further reading

Open the complete reference catalog

Primary Sources