Files

393 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html
class="not-ready lg:text-base"
style="--bg:#faf8f1"
lang="pt-br"
dir="ltr"
><head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Making slides in Marp (and saying &#39;Goodbye&#39; to PowerPoint) - Developer Bedoya</title>
<meta name="theme-color" />
<meta name="description" content="Writing slides in PowerPoint is so 20th century!!! So I watched this video:
And I replicated the slide:
--- marp: true theme: uncover class: invert math: mathjax style: | .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } --- # &lt;!--fit--&gt;An intro to Marp :rocket: &lt;span style=&#34;color:grey;&#34;&gt;By:&lt;/span&gt; Daniel Bedoya Alzate --- ## Slide Header * Use Markdown to write slides! * Tons of cool features! --- ## Code! ```csharp /** A Super helpful function!" />
<meta name="author" content="Daniel Bedoya Alzate" /><link rel="preload stylesheet" as="style" href="https://developerbedoya.net/main.min.css" />
<link rel="preload" as="image" href="https://developerbedoya.net/theme.svg" />
<link rel="preload" as="image" href="https://www.gravatar.com/avatar/a59eeed83af0fccd921266a8f3e30019?s=160&amp;d=identicon" />
<link rel="preload" as="image" href="https://developerbedoya.net/twitter.svg" /><link rel="preload" as="image" href="https://developerbedoya.net/github.svg" /><link rel="preload" as="image" href="https://developerbedoya.net/instagram.svg" /><link rel="preload" as="image" href="https://developerbedoya.net/rss.svg" />
<script
defer
src="https://developerbedoya.net/highlight.min.js"
onload="hljs.initHighlightingOnLoad();"
></script>
<link
rel="icon"
href="https://developerbedoya.net/favicon.ico"
/>
<link
rel="apple-touch-icon"
href="https://developerbedoya.net/apple-touch-icon.png"
/>
<meta name="generator" content="Hugo 0.131.0">
<meta itemprop="name" content="Making slides in Marp (and saying &#39;Goodbye&#39; to PowerPoint)">
<meta itemprop="description" content="Writing slides in PowerPoint is so 20th century!!! So I watched this video:
And I replicated the slide:
--- marp: true theme: uncover class: invert math: mathjax style: | .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } --- # &lt;!--fit--&gt;An intro to Marp :rocket: &lt;span style=&#34;color:grey;&#34;&gt;By:&lt;/span&gt; Daniel Bedoya Alzate --- ## Slide Header * Use Markdown to write slides! * Tons of cool features! --- ## Code! ```csharp /** A Super helpful function!">
<meta itemprop="datePublished" content="2022-12-24T11:43:50-03:00">
<meta itemprop="dateModified" content="2022-12-24T11:43:50-03:00">
<meta itemprop="wordCount" content="211">
<meta itemprop="keywords" content="Markdown,Marp"><meta property="og:url" content="https://developerbedoya.net/posts/marp/">
<meta property="og:site_name" content="Developer Bedoya">
<meta property="og:title" content="Making slides in Marp (and saying &#39;Goodbye&#39; to PowerPoint)">
<meta property="og:description" content="Writing slides in PowerPoint is so 20th century!!! So I watched this video:
And I replicated the slide:
--- marp: true theme: uncover class: invert math: mathjax style: | .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } --- # &lt;!--fit--&gt;An intro to Marp :rocket: &lt;span style=&#34;color:grey;&#34;&gt;By:&lt;/span&gt; Daniel Bedoya Alzate --- ## Slide Header * Use Markdown to write slides! * Tons of cool features! --- ## Code! ```csharp /** A Super helpful function!">
<meta property="og:locale" content="pt_br">
<meta property="og:type" content="article">
<meta property="article:section" content="posts">
<meta property="article:published_time" content="2022-12-24T11:43:50-03:00">
<meta property="article:modified_time" content="2022-12-24T11:43:50-03:00">
<meta property="article:tag" content="Markdown">
<meta property="article:tag" content="Marp">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Making slides in Marp (and saying &#39;Goodbye&#39; to PowerPoint)">
<meta name="twitter:description" content="Writing slides in PowerPoint is so 20th century!!! So I watched this video:
And I replicated the slide:
--- marp: true theme: uncover class: invert math: mathjax style: | .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } --- # &lt;!--fit--&gt;An intro to Marp :rocket: &lt;span style=&#34;color:grey;&#34;&gt;By:&lt;/span&gt; Daniel Bedoya Alzate --- ## Slide Header * Use Markdown to write slides! * Tons of cool features! --- ## Code! ```csharp /** A Super helpful function!">
<link rel="canonical" href="https://developerbedoya.net/posts/marp/" />
</head>
<body
class="bg-(--bg) text-black antialiased duration-200 ease-out [-webkit-tap-highlight-color:transparent] dark:text-white"
><header
class="mx-auto flex h-[4.5rem] max-w-(--w) px-8 whitespace-nowrap lg:justify-center"
>
<div class="relative z-50 flex items-center ltr:mr-auto rtl:ml-auto">
<a
class="-translate-y-[1px] text-2xl font-medium"
href="https://developerbedoya.net/"
>Developer Bedoya</a
>
<div
class="btn-dark text-[0px] ltr:ml-4 rtl:mr-4 h-6 w-6 shrink-0 cursor-pointer [background:url(./theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]"
role="button"
aria-label="Dark"
></div>
</div>
<div
class="btn-menu relative z-50 flex h-[4.5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden ltr:-mr-8 rtl:-ml-8"
role="button"
aria-label="Menu"
></div>
<script>
const htmlClass = document.documentElement.classList;
setTimeout(() => {
htmlClass.remove('not-ready');
}, 10);
const btnMenu = document.querySelector('.btn-menu');
btnMenu.addEventListener('click', () => {
htmlClass.toggle('open');
});
const metaTheme = document.querySelector('meta[name="theme-color"]');
const lightBg = '#faf8f1'.replace(/"/g, '');
const setDark = (isDark) => {
metaTheme.setAttribute('content', isDark ? '#000' : lightBg);
htmlClass[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark);
};
const darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
if (htmlClass.contains('dark')) {
setDark(true);
} else {
const darkVal = localStorage.getItem('dark');
setDark(darkVal ? darkVal === 'true' : darkScheme.matches);
}
darkScheme.addEventListener('change', (event) => {
setDark(event.matches);
});
const btnDark = document.querySelector('.btn-dark');
btnDark.addEventListener('click', () => {
setDark(localStorage.getItem('dark') !== 'true');
});
</script>
<div
class="nav-wrapper fixed inset-x-0 top-full z-40 flex h-full flex-col justify-center bg-(--bg) pb-16 duration-200 select-none lg:static lg:h-auto lg:flex-row lg:bg-transparent! lg:pb-0 lg:transition-none"
><nav
class="lg:ml-12 lg:flex lg:flex-row lg:items-center lg:space-x-10 rtl:space-x-reverse"
><a
class="block text-center text-xl leading-[5rem] lg:text-base lg:font-normal"
href="/cv/"
>Cvs</a
><a
class="block text-center text-xl leading-[5rem] lg:text-base lg:font-normal"
href="/links/"
>Links</a
><a
class="block text-center text-xl leading-[5rem] lg:text-base lg:font-normal"
href="/posts/"
>Posts</a
><a
class="block text-center text-xl leading-[5rem] lg:text-base lg:font-normal"
href="/slides/"
>Slides</a
></nav><nav
class="mt-12 flex justify-center space-x-10 lg:mt-0 lg:items-center ltr:lg:ml-14 rtl:space-x-reverse rtl:lg:mr-14 dark:invert"
>
<a
class="h-7 w-7 text-[0px] [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
style="--url: url(./twitter.svg)"
href="https://twitter.com/developerbedoya"
target="_blank"
rel="me"
>twitter</a>
<a
class="h-7 w-7 text-[0px] [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
style="--url: url(./github.svg)"
href="https://github.com/developerbedoya"
target="_blank"
rel="me"
>github</a>
<a
class="h-7 w-7 text-[0px] [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
style="--url: url(./instagram.svg)"
href="https://instagram.com/developerbedoya"
target="_blank"
rel="me"
>instagram</a>
<a
class="h-7 w-7 text-[0px] [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
style="--url: url(./rss.svg)"
href="https://developerbedoya.net/index.xml"
target="_blank"
rel="alternate"
>rss</a>
</nav>
</div>
</header>
<main
class="prose prose-neutral dark:prose-invert relative mx-auto min-h-[calc(100vh-9rem)] max-w-(--w) px-8 pt-14 pb-16"
><article>
<header class="mb-14">
<h1 class="my-0! pb-2.5">Making slides in Marp (and saying &#39;Goodbye&#39; to PowerPoint)</h1><div class="text-xs antialiased opacity-60"><time>Dec 24, 2022</time></div></header>
<section><p>Writing slides in PowerPoint is so 20th century!!! So I watched this video:</p>
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/EzQ-p41wNEE?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"
></iframe>
</div>
<p>And I replicated the slide:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-md" data-lang="md"><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>marp: true
</span></span><span style="display:flex;"><span>theme: uncover
</span></span><span style="display:flex;"><span>class: invert
</span></span><span style="display:flex;"><span>math: mathjax
</span></span><span style="display:flex;"><span>style: |
</span></span><span style="display:flex;"><span> .columns {
</span></span><span style="display:flex;"><span> display: grid;
</span></span><span style="display:flex;"><span> grid-template-columns: repeat(2, minmax(0, 1fr));
</span></span><span style="display:flex;"><span> gap: 1rem;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span># &lt;!--fit--&gt;An intro to Marp :rocket:
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;color:grey;&#34;</span>&gt;By:&lt;/<span style="color:#f92672">span</span>&gt; Daniel Bedoya Alzate
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Slide Header
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> Use Markdown to write slides!
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> Tons of cool features!
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Code!
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span><span style="color:#e6db74">```csharp
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"></span><span style="color:#75715e">/** A Super helpful function! */</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">void</span> Add (<span style="color:#66d9ef">int</span> a, <span style="color:#66d9ef">int</span> b)
</span></span><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> a + b;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#e6db74">```</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Math!
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>A single line expression...
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>$\mathcal{O}(n\log{n})$
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>OR, a multi-line expression.
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>$$
</span></span><span style="display:flex;"><span>\begin{align}
</span></span><span style="display:flex;"><span>x <span style="color:#960050;background-color:#1e0010">&amp;</span>= 1 + \frac{1}{2} \\
</span></span><span style="display:flex;"><span> <span style="color:#960050;background-color:#1e0010">&amp;</span>= 1.5
</span></span><span style="display:flex;"><span>\end{align}
</span></span><span style="display:flex;"><span>$$
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Images
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Images
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>Marp has a variety of image modifiers
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#e6db74">```markdown
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"></span>![<span style="color:#f92672">height:8cm bg.hue-rotate:90deg saturate</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span><span style="color:#e6db74">```</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg.hue-rotate:90deg saturate</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg blur</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg greyscale</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg sepia</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>You can stack backgrounds horizontally
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg vertical blur</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg greyscale</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">height:8cm bg sepia</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>... or vertically!
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Two columns!
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>![<span style="color:#f92672">bg left height:8cm</span>](<span style="color:#a6e22e">Linkedin.png</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> a
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> b
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--_color: red--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--_backgroundColor: black--&gt;</span>
</span></span><span style="display:flex;"><span># &lt;!--fit--&gt;Huge
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">## Two text columns!
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;columns&#34;</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> a
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> b
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> c
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> d
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> e
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">*</span> f
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;</span></span></code></pre></div>
<p>The result are <a href="/slides/marp/">here</a></p>
</section>
<footer class="mt-12 flex flex-wrap"><a
class="mb-1.5 rounded-lg bg-black/[3%] px-5 py-1 no-underline hover:bg-black/[6%] ltr:mr-1.5 rtl:ml-1.5 dark:bg-white/[8%] dark:hover:bg-white/[12%]"
href="https://developerbedoya.net/tags/markdown"
>markdown</a
><a
class="mb-1.5 rounded-lg bg-black/[3%] px-5 py-1 no-underline hover:bg-black/[6%] ltr:mr-1.5 rtl:ml-1.5 dark:bg-white/[8%] dark:hover:bg-white/[12%]"
href="https://developerbedoya.net/tags/marp"
>marp</a
></footer><nav
class="mt-24 flex overflow-hidden rounded-xl bg-black/[3%] text-lg leading-[1.2]! *:flex *:w-1/2 *:items-center *:p-5 *:font-medium *:no-underline dark:bg-white/[8%] [&>*:hover]:bg-black/[2%] dark:[&>*:hover]:bg-white/[3%]"
><a class="ltr:pr-3 rtl:pl-3" href="https://developerbedoya.net/posts/find-text-in-files-on-linux/"
><span class="ltr:mr-1.5 rtl:ml-1.5"></span><span>Find Text in Files on Linux</span></a
><a
class="justify-end pl-3 ltr:ml-auto rtl:mr-auto"
href="https://developerbedoya.net/posts/linux-on-a-samsung-tab-2-7-inches/"
><span>Linux on a Samsung Tab 2 (7 inches)</span><span class="ltr:ml-1.5 rtl:mr-1.5"></span></a
></nav><div class="mt-24" id="disqus_thread"></div>
<script>
const disqusShortname = 'developerbedoya';
const script = document.createElement('script');
script.src = 'https://' + disqusShortname + '.disqus.com/embed.js';
script.setAttribute('data-timestamp', +new Date());
document.head.appendChild(script);
</script></article></main><footer
class="mx-auto flex h-[4.5rem] max-w-(--w) items-center px-8 text-xs tracking-wider uppercase opacity-60"
>
<div class="mr-auto">&copy;2025
<a class="link" href="https://developerbedoya.net/">Developer Bedoya</a></div>
<a class="link mx-6" href="https://gohugo.io/" rel="noopener" target="_blank"
>powered by hugo</a
>
<a
class="link"
href="https://github.com/nanxiaobei/hugo-paper"
rel="noopener"
target="_blank"
>hugo-paper</a
>
</footer>
</body>
</html>