.....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
- 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)
- With NPM package manager (
- 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](https://marpit.marp.app/) 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 -->
# 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](https://marpit.marp.app/theme-css)
---
# Presenter note
During the presentation we can make some presenter note for ourselves, which will only be shown to the presenter. To make it we just have to place the note into a comment tag like this:
<!-- We can make comments during our presentation which will be shown in the presenter tool -->
---
<!-- _backgroundImage: url(https://justyy.com/wp-content/uploads/2016/01/markdown-syntax-language.png) -->
<!-- _color: red -->
<p style="position:absolute; top: 100px">Background image support</p>
<p style="position:absolute; top: 400px">We all love Markdown</p>
---
<!-- _backgroundColor: white -->
<!-- _color: white -->
<!-- _header: '' -->
<!-- _footer: '' -->
<p style="position:absolute; top: 100px">Multiple backgrounds with splitting</p>
---
# And many more
