Skip to content

Instantly share code, notes, and snippets.

Last active February 5, 2024 07:52
Show Gist options
  • Star 53 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save yhatt/a7d33a306a87ff634df7bb96aab058b5 to your computer and use it in GitHub Desktop.
Save yhatt/a7d33a306a87ff634df7bb96aab058b5 to your computer and use it in GitHub Desktop.
Marp Next example



Markdown presentation ecosystem
by Marp Team (@marp-team)


  • 📝 Write slide deck with plain Markdown (CommonMark)
  • 🏭 Built on Marpit framework: A brand-new skinny framework for creating slide deck
  • ⚙️ Marp Core: Easy to start using the core engine and built-in themes via npm
  • 📺 Marp CLI: Convert Markdown into HTML, PDF, PPTX, and images
  • 🆚 Marp for VS Code: Live-preview your deck while editting
  • and more...

How to write slides?

Split pages by horizontal ruler (e.g. ---). It's very simple.

# Slide 1



# Slide 2



Marp has extended syntax called "Directives" to support creating beautiful slides.

Insert front-matter to the top of Markdown:

theme: default

or HTML comment to anywhere:

<!-- theme: default -->

  • theme: Choose theme
  • size: Choose slide size from 16:9 and 4:3 (except Marpit framework)
  • headingDivider: Instruct to divide slide pages at before of specified heading levels
theme: gaia
size: 4:3

# Content

Marp can use built-in themes in Marp Core: default, gaia, and uncover.

These are the setting value per slide pages.

  • paginate: Show pagination by set true
  • header: Specify the contents for header
  • footer: Specify the contents for footer
  • class: Set HTML class for current slide
  • color: Set text color
  • backgroundColor: Set background color

Spot directives

Local directives would apply to defined page and following pages.

They can apply to single page by using underscore prefix such as _class.

bg right 95%


This page is using invert color scheme defined in Marp built-in theme.

<!-- _class: invert -->

You can resize image size and apply filters through keywords: width (w), height (h), and filter CSS keywords.

![width:100px height:100px](image.png)
![blur sepia:50%](filters.png)

Please refer resizing image syntax and a list of CSS filters.

w:100px h:100px w:100 h:100 blur sepia:50%

You can set background image for a slide by using bg keyword.

![bg opacity](

bg opacity

Multiple backgrounds (Marpit's advanced backgrounds)

Marp can use multiple background images.

![bg blur:3px](
![bg blur:3px](
![bg blur:3px](

Also can change alignment direction by including vertical keyword.

bg blur:3px bg blur:3px bg blur:3px

Marp can use Deckset style split background(s).

Make a space for background by bg + left / right keywords.

![bg right](image.jpg)

bg right

Marp will parse a list with asterisk marker as the fragmented list for appearing contents one by one. (Only for exported HTML by Marp CLI / Marp for VS Code)

# Bullet list

- One
- Two
- Three


# Fragmented list

* One
* Two
* Three

Math typesetting (only for Marp Core)

KaTeX math typesetting such as $ax^2+bc+c$ can use with Pandoc's math syntax.



Auto-scaling (only for Marp Core)

Several built-in themes are supported auto-scaling for code blocks and math typesettings.

Too long code block will be scaled-down automatically. ------------>
Too long code block will be scaled-down automatically. ------------------------>
Too long code block will be scaled-down automatically. ------------------------------------------------>

Auto-fitting header (only for Marp Core)
is available by annotating <!--fit--> in headings.

## <!--fit--> Auto-fitting header (only for Marp Core)

Marp uses <section> as the container of each slide. And others are same as styling for plain Markdown. The customized theme can use in Marp CLI and Marp for VS Code.

/* @theme your-theme */

@import 'default';

section {
  /* Specify slide size */
  width: 960px;
  height: 720px;

h1 {
  font-size: 30px;
  color: #c33;

<style> tag in Markdown will work in the context of theme CSS.

theme: default

section {
  background: yellow;

Re-painted yellow background, ha-ha.

You can also add custom styling by class like section.custom-class { ... }. Apply style through <!-- _class: custom-class -->.

If you want one-shot styling for current page, you can use <style scoped>.

<style scoped>
a {
  color: green;

![Green link!](
<style scoped> a { color: green; } </style>

Enjoy writing slides! ✌️

w:1em h:1em  Marp: Markdown presentation ecosystem —
by Marp Team (@marp-team)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment