MarpessaA Marp Theme

Marpessa

A Marp Theme

Marpessa is a Marp color theme.
(Marpessa is also a Greek mythological figure).

MarpessaA Marp Theme

Add this to your Visual Studio Code settings.json:

"markdown.marp.themes": [
  "https://cdn.jsdelivr.net/gh/sanand0/marpessa/marpessa.css"
]

Then add a theme Marp directive to your Markdown slides:

theme: marpessa

To generate HTML slides with Marp CLI, run:

wget https://cdn.jsdelivr.net/gh/sanand0/marpessa/marpessa.css
marp --theme-set marpessa.css --html slides.md -o index.html
MarpessaA Marp Theme

Here are some fonts that go well with Marpessa

Marpessa uses Fira Sans by default. Source Sans 3, Open Sans, Roboto, Inter, ... all work well.

Add this to your YAML frontmatter to use Source Sans 3:

style: |
  @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3");
  :root { font-family: "Source Sans 3", sans-serif; }
MarpessaA Marp Theme

This theme supports layouts and colors

MarpessaA Marp Theme

Multi-column with _class: columns

If the slide begins with one or more headings (h1, h2, ...), they span the full width. The rest of the content is split into equal-width columns.

So, if you have two elements below the heading, you will have two columns. They may be images, tables, text blocks, lists, blockquotes, etc.

<!-- _class: columns -->

# Slide Title

<div> ... </div>
<div> ... </div>
MarpessaA Marp Theme

Multi-column with <div class="columns">

You can use a <div class="columns"> to create a multi-column layout, like below.

The first child of .columns forms the first column.

The second child becomes part of the second column.

You can add as many columns as you want.

Of any type.

They have equal
height.

Content outside the .columns div will span the full width of the slide.

MarpessaA Marp Theme

... and <div class="columns-justify">

You can use a <div class="columns-justify"> to create a multi-column layout, like below.

The first element is left aligned.

Inner elements are centered

... no matter how many there are.

The last element is right aligned.

Content outside the .columns-justify div will span the full width of the slide.

header and footer use this layout by default.

MarpessaA Marp Theme

Centered slides with _class: title

To center slides vertically (e.g. title slides), use:

<!-- _class: title -->

# Slide Title
MarpessaA Marp Theme

Smaller fonts with _class: small

Add <!-- _class: small --> to the YAML frontmatter for smaller fonts. Use small-1, small-2, and small-3 for progressively smaller font sizes.

This affects slide contents, not headings. Applying multiple times cumulates the effect.

You can also apply them to specific elements. for example:

  • .small has a slightly smaller font size. This is small inside small.
  • .small-1 has an even smaller font size. This is small-1 inside small.
  • .small-2 has an even smaller font size. This is small-2 inside small-2.
  • .small-3 has an even smaller font size. This is small-2 inside small-3.
MarpessaA Marp Theme

Use <header> and <footer>

Elements in the header and footer are evenly spaced in the top and bottom of the slide respectively. For example, add this to your YAML frontmatter:

header: |
  <div>Top left</div>
  <div>Top right</div>

footer: |
  <div>Bottom left</div>
  <div>Bottom middle</div>
  <div>Bottom right</div>
MarpessaA Marp Theme

Use <transcript>

Anything inside <transcript> will be not shown on the slide, but will be visible on other Markdown converters.

Useful to show content like transcripts, references, or notes that you don't want on the slides, but should be visible on other Markdown renderers like GitHub.

For example, the section below is visible on GitHub not on the slides.

This transcript will be visible on GitHub, but not on the slides.
MarpessaA Marp Theme

Default theme

Add _class: theme-seafoam for Mocha Warmth - warm professional neutrals.

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Edit themes by setting these CSS variables

--bg: #f5f1ed;
--fg: #3d3935;
--muted: #8a7d73;
--border: #ccc0b3;
--heading: #8b6f47;
--heading-secondary: #6b5d52;
--accent: #b17a50;
--link: #b17a50;
--link-hover: #8b6f47;

--code-bg: #1f1b17;
--code-fg: #f7f1e8;
--quote-bg: #f9f5f1;
--quote-border: #d4a574;
--table-header-bg: #d4a574;
--table-header-fg: #ffffff;
--table-row-stripe: #faf7f4;
--mark-bg: #f9e5c8;
MarpessaA Marp Theme

Seafoam theme

Add _class: theme-seafoam for Seafoam Clarity - Fresh aqua-green for tech/wellness

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Butter theme

Add _class: .theme-butter for Butter Optimism - Sunny yellows for creative energy

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Clementine theme

Add _class: .theme-clementine for Clementine Breeze - Peachy warmth for lifestyle brands

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Tailwind theme

Add _class: .theme-tailwind for Tailwind Slate + Indigo - Modern professional classic

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Opencolor theme

Add _class: .theme-opencolor for Open Color Teal - Clean and accessible

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Bootstrap theme

Add _class: .theme-bootstrap for Bootstrap Classic - Familiar and reliable

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Atlassian theme

Add _class: .theme-atlassian for Atlassian - Corporate blue sophistication

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Midnight theme

Add _class: .theme-midnight for Midnight Professional - Elegant dark with teal

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Burgundy theme

Add _class: .theme-burgundy for Burgundy Luxe - Rich dark elegance

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Nord theme

Add _class: .theme-nord for Nord Dark - Arctic minimalism

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3
MarpessaA Marp Theme

Solarized theme

Add _class: .theme-solarized for Solarized Dark - Classic terminal aesthetic

  • Sample Text | Link | strong | emphasis | code | mark

Heading 2

Heading 3

Heading 4

This is a blockquote

let x = f("x", 2);
// comment
table header
one 1
two 2
three 3