Windows users can use the options given by the Office family, the PowerPoint, Linux users can use both LibreOffice or OpenOffice solutions like Impress. We, of course, do have online alternatives like Prezi, Google Slides, there are tons out there, but as a developer, we may be attracted to something more minimal and something which can be versioned by ourself may be in a repository, and of course, we would not like to deal with power-hungry tools or we do not want to go to a website where we can edit our presentation.

In this article, we would like to introduce a tool that can come in handy in creating presentations that are meant to be easy to create, and because we are more into code, and code-related stuff, we may prefer to create creative stuff via code. Most of the developers are familiar with languages that are being used for documentation or tutorials, for example, AsciiDoc or Markdown, and what if we can make and design our presentations in Markdown with some minimal CSS and HTML knowledge?

For this problem Marp gives us a fairly simple solution. With this tool, we can convert Markdown files to:

HTML with an interactive presentation toolkit  PDF PPT

Sounds cool right? How can I start using it? It's easy.

Marp is a product based on multiple modules/extensions, let's take a look at those first:

Marpit skinny framework based on the markdown-it parser supports CommonMark specification of Markdown Mostly written in JavaScript Marp-core Based on the Marpit module/package (don't be confused with the name core), it extendes the Marpit framework with additional features Mostly written in TypeScript Built-in official themes (CSS) Emoji support Math support Auto-scaling features Marp CLI Command line interface for which depends on the Marp-core Installation guide (multiple ways): With NPM package manager (npm install -g @marp-team/marp-cli) Standalone binary (can be downloaded from the GitHub repository) With Windows package manager tools (Chocolatey or Scoop) Gives the user the power to convert .md files to .html, .ppt, .pdf Supports watch and server mode

If you are willing to create the next Markdown presenter tool then the Marpit framework is a good start, you can import it to your project and use the power of the framework, but right now we want to talk about the end product itself, Marp, which uses all the mentioned tools/modules above, and based on these tools you are able to create the most beautiful and minimalistic presentations.

To write your very first presentation using this tool, first install the Marp CLI and you are good to go. Let's make some slides, with some cool background, make sure every page has page numbers and try out some directives.

To start the CLI in watch mode just run the following: marp prezi.md -w (if we would like to enable HTML tags then use the -html flag too)

Check out the Marp website to know more.

Marp has a lot of potential being a cool and handy tool in our hand, if we are much more into the Markdown world, we can bring fantastic presentations to the audience with ease.

<!-- paginate: true backgroundColor: #1F2F3B color: #f7941d html: true header: Presentation header footer: Presentation footer -->

---

TIS Presentation

We can use the typical Markdown syntax and every time we would like to create a new slide we just have to insert the 3 dashed '---' at the end of our slide.

In the header comment section we are able to configure global and local directives which can control:

• pagination

• background color

• text color

• enable HTML tags in our presentation

• header and footer content

---

<!-- _paginate: false --> <!-- _header: Pagination turned off for this slide --> <!-- _backgroundImage: "linear-gradient(to bottom, #1F2F3B, #1f1f1f)" --> <!-- _footer: Custom background only for this slide -->

Slide 1

Second slide

We can customize slides individually from the global scope, we can use local scope directives, to use the local scope just start the property name with a '_', for example:

• pagination can be turned off on slides (_paginate: false)

• header and footer content can be changed (_header and _footer)

• background related color or image

• font color

• custom directives written in Javascript

---

CSS support

Marp has a wide variety of CSS support which can be found here

---

And many more

The markdown code above can be checked out here as the 'final' presentation and the all the final assets (PDF, PPT) can be found here. The pictures are taken from the presentation too. Have fun making awesome minimalistic slides with Marp! \o/