Migrar de novo para gitea 🙏

content/posts/marp.md

@@ -0,0 +1,140 @@
+---
+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/)