Marp Next example

marp.md

marp

Marp

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.

---

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.

---

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)

---

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.

---

Split background

Marp can use Deckset style split background(s).

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

![bg right](image.jpg)

---

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! ✌️

  Marp: Markdown presentation ecosystem — https://marp.app/

by Marp Team (@marp-team)