7.5 KiB
marp | paginate | _class |
---|---|---|
true | true | invert |
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 themesize
: Choose slide size from16:9
and4: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
, anduncover
.
Local directives
These are the setting value per slide pages.
paginate
: Show pagination by settrue
header
: Specify the contents for headerfooter
: Specify the contents for footerclass
: Set HTML class for current slidecolor
: Set text colorbackgroundColor
: 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/)