---
title: "Making slides in Marp (and saying 'Goodbye' to PowerPoint)"
date: 2022-12-24T11:43:50-03:00
draft: false
tags: ['markdown', 'marp']
---

Writing slides in PowerPoint is so 20th century!!! So I watched this video:

{{< youtube EzQ-p41wNEE >}}

And I replicated the slide:

{{< highlight md >}}
---
marp: true
theme: uncover
class: invert
math: mathjax
style: |
    .columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
---

# <!--fit-->An intro to Marp :rocket:

<span style="color:grey;">By:</span> Daniel Bedoya Alzate

---

## Slide Header

* Use Markdown to write slides!
* Tons of cool features!

---

## Code!

```csharp
/** A Super helpful function! */
void Add (int a, int b)
{
    return a + b;
}
    
```

---

## Math!

A single line expression...

$\mathcal{O}(n\log{n})$

OR, a multi-line expression.

$$
\begin{align}
x &= 1 + \frac{1}{2} \\ 
  &= 1.5
\end{align}
$$

---

## Images

![height:8cm](Linkedin.png)

---

## Images

Marp has a variety of image modifiers

```markdown
![height:8cm bg.hue-rotate:90deg saturate](Linkedin.png)
```

![height:8cm bg.hue-rotate:90deg saturate](Linkedin.png)

---

![height:8cm bg blur](Linkedin.png)
![height:8cm bg greyscale](Linkedin.png)
![height:8cm bg sepia](Linkedin.png)

You can stack backgrounds horizontally

---

![height:8cm bg vertical blur](Linkedin.png)
![height:8cm bg greyscale](Linkedin.png)
![height:8cm bg sepia](Linkedin.png)

... or vertically!

---

## Two columns!

![bg left height:8cm](Linkedin.png)

* a
* b

---

<!--_color: red-->
<!--_backgroundColor: black-->
# <!--fit-->Huge

---

## Two text columns!

<div class="columns">
<div>

* a
* b
* c

</div>
<div>

* d
* e
* f

</div>
</div>
{{< / highlight >}}

The result are [here](/slides/marp/)