DEV Community

Flavius
Flavius

Posted on

Create Slides Using Markdowns!

What is Marp?

Marp (a.k.a Markdown Presentation Ecosystem) is a new and open-source tool which can be used to easily create PowerPoint like slides using the markdown syntax as well as CSS type attributes.

Getting Started

There are currently 4 ways you can use Marp:
Marp for VS Code
Marp as a CLI
Marp Core tool
And a smaller version:
Marpit Frameword

Creating Your First Slide!

Go ahead and create a file with the .md extension.
Declare a file which uses Marp by writing:

---
marp:true
---

Enter fullscreen mode Exit fullscreen mode

In Marp, you create and separate slides by using 3 - (which is also called as horizontal ruler)

---

# Slide Title

Slide body
etc.
It uses the normal markdown syntax

---
^^ first slide ends here 

# This is the second slide
behaves just like the previous one
---
Enter fullscreen mode Exit fullscreen mode

Themes

As of writing this tutorial, Marp supports 3 CSS themes:
default
gaia
uncover

---
theme: gaia
---
Enter fullscreen mode Exit fullscreen mode

There are also the backgroundColor and backgroundImage attributes:

---
backgroundColor: #fff
backgroundImage: url('Some url of image or svg file')
---
Enter fullscreen mode Exit fullscreen mode

And much more!

Plugin-Type System

Because Marp is built on the marpit framework which makes HTML/CSS slide, you can easily create your own plugins!

Export to other formats

Marp also allows you to export your slides to HTMl/CSS and PowerPoint Presentations.

Anyway, Marp seems like a really fun to tool to experiment with. You might as well give it a try.

Links

Marp Official Website
Marpit Framework Website
Marp GitHub

Top comments (1)

Collapse
 
cavo789 profile image
Christophe Avonture

Just to give alternative : there is also the excellent reveal-md github.com/webpro/reveal-md