Marp Core built-in themes

We provide some nice official themes in Marp Core. You can choose a favorite theme by using Marpit theme directive in your Markdown.

Screenshots were taken from the rendered result of an example.

invert class

The all of built-in themes support invert class to use the inverted color scheme.

<!-- class: invert -->

---

Default

The default theme of Marp. It is based on GitHub markdown style, but optimized to the slide deck. Slide contents will be always vertically centered.

<!-- theme: default -->

Gaia

Gaia theme is based on the classic design of yhatt/marp.

Originally, this theme was created for a maintainer to use, and it's inspired from azusa-colors keynote template.

<!-- theme: gaia -->

Features

lead class

Contents of the slide will align to left-top by Gaia's default. But you can use lead class to be centering like uncover theme. It is useful for the leading page like a title slide.

<!--
theme: gaia
class: lead
-->

ℹ️ Marpit's Spot directive would be useful to apply lead class only into a current page.

<!-- _class: lead -->

Color scheme

Gaia theme supports an additional color scheme by gaia class.

<!-- class: gaia -->

ℹ️ Of course you may use multiple classes, by array or separated string by space.

---
theme: gaia
class:
  - lead
  - invert
---

# Lead + invert

---

<!-- class: lead gaia -->

# Lead + gaia

Uncover

Uncover theme has three design concepts: simple, minimal, and modern. It's inspired from many slide deck frameworks, especially reveal.js.

<!-- theme: uncover -->

⚠️ Restrictions

Auto-scaling for code block is disabled because uncover theme uses the elastic style that has not compatible with it.

---

Metadata for additional features

Marp Core will recognize the metadata to be able to enable extra features whose side effect through manipulation to rendered DOM structure.

In other words, the enabled feature requires taking care of manipulated DOM when styling.

@auto-scaling

Enable auto-scaling features.

• true: Enable all features.
• fittingHeader: Enable fitting header.
• math: Enable scaling for math block.
• code: Enable scaling for code block.

Through separating by comma, it can select multiple keywords for individual features. (e.g. @auto-scaling fittingHeader,math)