Marp themes still created with beauty and simplicity in mind. This is Marp Style 2.0
MarpX — Beautiful, semantic, and powerful themes for Marp presentations. MarpX is the result of an effort to expand, redesign, optimize and improve my first Marp slide theme composition initiative Marpstyle. One may say MarpX is Marpstyle 2.0.
MarpX is a comprehensive suite of advanced, visually appealing, and highly customizable themes and utilities for Marp, the Markdown presentation ecosystem.
Designed for educators, researchers, and professionals, MarpX enables the creation of visually stunning, semantically rich, and accessible presentations with minimal effort.
---
title: How to use MarpX Special Tags
author: Paulo Cunha
description: Canonical use of marpx theme
keywords: [Marp, MarpX, Gödel, Paulo Cunha]
header:
footer: "[`Back to Contents`](#2)"
marp: true
theme: gödel
paginate: true
transition: none
size: 16:9
lang: en
math: mathjax
---| Item | Marcador |
|---|---|
| Boxes | <box></box> or <span class="box"></span> |
| Black or White Slides | <!-- _class: "black-slide" --> or <!-- _class: "white-slide" --> |
| Callouts | <div class="callout"></div> |
| Containers | <div class="container"></div> |
| Multicolumn | <div class="multicolumn" align="center"></div> |
| Notes | <div class="notes"></div> |
| Quotes | <!-- _class: "quote" --> or <!-- _class: "quote dark" --> |
| References | <!-- _class: "references" --> |
| Title | <!-- _class: "title" --> or <!-- _class: "title-academic" --> |
| TOC | <!-- _class: "toc" --> |
| Transition Slide | <!-- _class: "chapter" --> |
| Videos | <video controls height="400px"></video> |
Try the Reference Guide that shows most of the special canonical slide types in Marpx!
- Multiple Slide Types: Effortlessly create title, chapter, agenda, references, quotes, end/thank you, and other specialized slides.
- Semantic Slide Classes: Use intuitive Markdown comments (e.g.,
<!-- _class: chapter -->) to switch slide layouts and styles. - Multi-Column Layouts: Easily build slides with flexible columns and grid-based layouts.
- Advanced Table Styling: Enjoy beautiful, readable tables with zebra striping, hover effects, and responsive design.
- Custom Quotes: Unified quote system with alternative styles (e.g.,
quote dark) for emphasis and variety. - References Section: Dedicated formatting for bibliographies and reference slides, supporting academic standards.
- Branding Support: Seamlessly add logos, copyright, and custom footers.
- Responsive and Scalable: Optimized for FullHD, 16:9, and 4:3 aspect ratios.
- Google Fonts Integration: Modern, readable font choices for every context.
- Accessible Colors: Carefully curated palette for clarity, contrast, and accessibility.
- Easy Customization: Modify variables and classes to match your institution or personal style.
Here you´ll find examples of the available themes. Click on the picture to open a corresponding PDF example.
Lorca - In honor of Federico García Lorca (1898 - 1936) |
-
In case you want to install the theme files locally, for possible use without internet access, proceed as follow:
- Clone or Download this repository, specially the the files in the
themesdirectory (folder), to your local drive, in a very well know directory (folder); - When using
VScode, configure the code-workspace file to indicate exactly where the theme files are. Remember that there is always the possibility of these theme files being downloaded from the Internet:
Example of a locally stored theme
code-workspaceconfig file:{ "folders": [ { "path": "." } ], "settings": { "markdown.marp.themes": [ "./themes/marpx.css", "./themes/copernicus.css", "./themes/einstein.css", "./themes/frankfurt.css", "./themes/galileo.css", "./themes/gauss.css", "./themes/gödel.css", "./themes/gropius.css", "./themes/hobbes.css", "./themes/lorca.css", "./themes/newton.css", "./themes/socrates.css", "./themes/sparta.css" ] } } - Clone or Download this repository, specially the the files in the
-
In case you don´t want the burden of downloading anything and use the themes directly from the Internet, proceed as follows.
- Config your VScode code-workspace config file to indicate exactly where the theme files are (Internet).
Internet stored themes
code-workspaceconfig:{ "folders": [ { "path": "." } ], "settings": { "markdown.marp.themes": [ "https://cunhapaulo.github.io/marpx/themes/marpx.css", "https://cunhapaulo.github.io/marpx/themes/copernicus.css", "https://cunhapaulo.github.io/marpx/themes/einstein.css", "https://cunhapaulo.github.io/marpx/themes/frankfurt.css", "https://cunhapaulo.github.io/marpx/themes/galileo.css", "https://cunhapaulo.github.io/marpx/themes/gauss.css", "https://cunhapaulo.github.io/marpx/themes/gödel.css", "https://cunhapaulo.github.io/marpx/themes/gropius.css", "https://cunhapaulo.github.io/marpx/themes/lorca.css", "https://cunhapaulo.github.io/marpx/themes/hobbes.css", "https://cunhapaulo.github.io/marpx/themes/newton.css", "https://cunhapaulo.github.io/marpx/themes/socrates.css", "https://cunhapaulo.github.io/marpx/themes/sparta.css" ] } }
Once you've configured the location of the theme files, the next step is to create your slidedeck.
The first thing to do in your file is to create the header section in YAML:
---
title: How to use MarpX Special Tags
author: Paulo Cunha
description: Canonical use of marpx theme
keywords: [Marp, MarpX, Gödel, Paulo Cunha]
header:
footer: "[`Back to Contents`](#2)"
marp: true
theme: gödel
paginate: true
transition: none
size: 16:9
lang: en
math: mathjax
------
<!-- _class: title-academic -->
<!-- _backgroundColor: white -->

<div class="title">Western Philosophy from Athens</div>
<div class="subtitle">From nature to the being</div>
<div class="author">Socrates (Σωκράτης)</div>
<div class="date">Athenas, 390 b.C.</div>
<div class="organization">Ágora, the Assembly of the Polis</div>
------
<!-- _class: chapter -->
# Chapter Title
---
<!-- _class: quote dark -->
> "A beautiful quote." ---When all has been said and done, export your slide-deck to one of the available formats (PDF, HTML, PowerPoint, PNG, etc. )
- Theme Variables:
Tweak colors, fonts, and layout variables in the CSS to match your branding or preferences. - Slide Classes:
Combine multiple classes (e.g.,<!-- _class: quote dark -->) for even more control.
| Usual style | Academic style |
|---|---|
| Autonumbering captions | Vertical-center alignment |
|---|---|
| Normal mode quote | Dark mode quote |
|---|---|
- Inspired by the Marp project and its contributors.
- Inspired by the work of marp-template-hsmw. Herzlichen Dank!
- Uses Google Fonts for typography.
- Thanks to the open-source community for feedback, inspiration, and contributions.
- Special thanks to all educators, researchers, and professionals who value clarity and beauty in their presentations.
MarpX is authored and maintained by Paulo Cunha, 2025.
For questions, suggestions, or contributions, please open an issue or pull request on GitHub.
This project is licensed under the MIT License. See LICENSE for details.