Marp #

Warning: This post hasn't been updated for over a year. The information may be out of date.

Write slides in Markdown and CSS.

(Maybe) useful resources #

Official docs & etc:

• Marp: Markdown Presentation Ecosystem
• Marpit Markdown
• marp-team/marp-core: The core of Marp converter
• marp-team/marp-vscode: Marp for VS Code: Create slide deck written in Marp Markdown on VS Code (Integrates marp-cli, no need to install on machine.)

Other links:

• grolig/pv281

Example slide deck #

Use HTML comment (<!-- This is a speaker note -->) within each slide to add speaker notes.

---
marp: true
size: 4:3
---

# Meeting

<!-- Hello every one, welcome to my talk... -->

---

## Topic 1

- ...
- ...

Debugging VSC/Codium #

Export as PDF requires Chrome or Edge installation #

First export to HTML, then print and save as PDF from browser (check scale instead of fit to page width).

Only images from the same folder of slides #

According to Issue #64 of marp-team/marp-vscode, this is by restriction (design) of VSC.

Custom CSS #

Doc: Theme CSS

All slides #

---
marp: true
---
<style>
table {
    font-size: 0.7rem
}
</style>

# My slides

Single slide #

...
---
<style scoped>
h2 {
    color: red;
}
</style>

## Red heading
---
...

Page number #

Ref: yhatt’s comment on marp-team/marpit Issue #271

---
marp: true
size: 4:3
paginate: true
---
<style>
section::after {
  content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
}
</style>

# Presentation