- Run
npm install
- Install the recommended VSCode workspace extensions (to preview the slides in VSCode)
- Create a
slides
folder in the root - Create a
.md
file within theslides
folder - Write your markdown slides following marp syntax
- Run
npm run export
- The resulting .pngs can be located in
_output
To enable Marp in a .md
file, make sure to add the following at the top of the document:
---
marp: true
---
You can also add other properties to customize your slides:
---
marp: true
paginate: true
theme: theme-yellow
size: 4:5
footer: paulasantamaria.com @pau.codes
---
This properties are called "directives". Learn more about them here
<!-- ./slides/my-carousel.md -->
---
marp: true
paginate: true
theme: theme-blue-dark
size: 4:5
footer: @pau.codes
header: TypeScript Gamified
---
# First slide title
![](./assets/some-pic.png)
---
# Second slide title
```ts
console.log('some code');
\```
<!-- Ignore the bar. I had to add it to avoid breaking the README's markdown -->
---
<!-- Use html elements with css to override the default styles defined in the theme -->
<div class="final-slide">
# Final slide
## Call to action
</div>
Tools used in this workspace:
- Marp CLI
- Marp VSCode extension
- Syntax theme: Atom One Dark by Daniel Gamage