Skip to content

Instantly share code, notes, and snippets.

@yhatt yhatt/marp.md
Created Sep 16, 2019

Embed
What would you like to do?
Marp Next example
marp
true

Marp

h:250

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

Features

  • 📝 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

foobar

---

# Slide 2

foobar

Directives

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 -->

https://marpit.marp.app/directives


Global directives

  • 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.


Local directives

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%


Example

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

<!-- _class: invert -->

Image syntax

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%


Background image

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

![bg opacity](https://yhatt-marp-cli-example.netlify.com/assets/gradient.jpg)

bg opacity


Multiple backgrounds (Marpit's advanced backgrounds)

Marp can use multiple background images.

![bg blur:3px](https://fakeimg.pl/800x600/fff/ccc/?text=A)
![bg blur:3px](https://fakeimg.pl/800x600/eee/ccc/?text=B)
![bg blur:3px](https://fakeimg.pl/800x600/ddd/ccc/?text=C)

Also can change alignment direction by including vertical keyword.

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


Split background

Marp can use Deckset style split background(s).

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

![bg right](image.jpg)

bg right


Fragmented list

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.

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

$ax^2+bc+c$
$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

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)

Theme CSS

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;
}

Tweak style in Markdown

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

---
theme: default
---

<style>
section {
  background: yellow;
}
</style>

Re-painted yellow background, ha-ha.

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


Scoped style

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

<style scoped>
a {
  color: green;
}
</style>

![Green link!](https://marp.app/)
<style scoped> a { color: green; } </style>

Enjoy writing slides! ✌️

w:1em h:1em  Marp: Markdown presentation ecosystem — https://marp.app/
by Marp Team (@marp-team)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.