How to efficiently write/code your presentation slides

Hi there! Yes! The answer is definitely yes! You read it right. I’m writing to tell you about an extremely efficient way of preparing your presentation slides and it doesn’t involve using Google Slides or Microsoft PowerPoint.

Background ⏳

Before I jump into how, let me quickly delve into the why. So I had to conduct a workshop on React which spanned over 6 days which meant that I had to have my slides prepared for all 6 days of the event. I knew preparing it on Google Slides would be a nightmare for me since I have an over average level of OCD which meant I would spend more than necessary amount of time making sure that each and everything in the slide looked perfect to me. So I had to have some sort of easier solution that could help me be less stressed about preparing my presentation slides but more focused on the content that that slides would have. Thus, after a very short detour from actually preparing my presentation slides to the mystical land of Google I landed into the answer to my prayers.

Marp 📐

I didn’t have to look any further than the first search result page of google to discover Marp, a Markdown Presentation Ecosystem which as it says and also in my opinion provides the best experience I ever have had to prepare a really beautiful slide deck. And what’s awesome about Marp is that since it’s essentially markdown, writing it is relatively easy since everyone who owns a github repo or used IRC like Slack definitely must have explored Markdown once in their lifetime.
And though Marp has a CLI interface that you could install to create the slidedeck from the markdown files, I didn’t prefer using it. What I did instead was install a Visual Studio Code extension for Marp which supports exporting the slidedeck in pdf format as well as live slide deck output in the VS Code’s Markdown preview pane which meant I could see the slide deck updating as soon as I updated the markdown file.

Marp for VS Code - Visual Studio Marketplace

Writing Marp Presentations 📝

As I mentioned earlier it’s fairly easy to adopt marp to write your presentations if you’re used to writing markdown files. Let’s take a look at a simple example:

---
marp: true
---
# Slide 1
Slide Text
---
# Slide 2

Markdown Preview

• By setting the key marp to true you’re stating that the markdown file is for preparing slides using marp.
• — — - is used to delimit the content of the slides.
• # like any other markdown file is used to add a h1 heading to the slide. You could use all markdown syntax like * for lists and ![]()for images.

• In order to add page numbers you’d just need to set pagination: true. You also get a set of three themes that you can choose from default , gaia and uncover I’m not a huge fan of gaia but I love the default and uncover themes.
• You could set the aspect ratio for the slides which defaults to 16:9 to 4:3 by setting size: 4:3
• And my personal favorite setting is the ability of turning on the dark theme by simply setting class: invert which makes the slides look a thousand times cooler in my opinion.
• For adding images you simply use ![](folder_name/img_name.jpg)
  which will load the local image. But how it’s displayed depends upon the size of the image. In order to stretch it across the entire slide you’d add bg as the alternate text as ![bg](folder_name/img_name.jpg)
• In order to set the image with fixed width or height you could pass in width and height properties to the image as well like how you would set the image as the background of the slide. For example to set the image’s width to 300px you’d do ![w:300px](folder_name/img_name.jpg)
• Another common usecase that you’d land into is adding the image besides the text which can easily be achieved by adding left or right properties to the image. For example ![left](folder_name/img_name.jpg)
• You could also use multiple properties separated by spaces like ![bg right w:500](folder_name/img_name.jpg)

---
# Introduction to **React**
![bg right w:500](img/reactLogo.png)

Markdown Preview

• Another reason why writing slides in markdown is better than writing it on google slides is syntax highlighting. Like in any markdown file you’d be able to add code from any scripting language and it will syntax highlight it for you making your presentations more standard and you’d never paste screenshot of code in your presentations again

Syntax Highlighting

---
# Simple React Component
```jsx
const HelloMessage = () => {
 return (
  <div>
    Hello Aces
  </div>
 );
};
```

Theming and Customizations 🎨

You might be thinking that’s all great but doesn’t having a specific set of settings limit how much I’d be able to style or customize my slides. First of all I think having a fixed rigid set of settings makes the slides look more standard and less all over the place. But if you’re looking for customizations anyway, then marp supports customizations using css properties or you could even create your own theme if it serves your purpose.
If there aren’t many styling changes that you’d want then you could add inline styling using the syntax that you’d use to comment on a HTML file. For example, to change the background color to red you’d do <!-- backgroundColor: red --> If you place it at the second slide, all the slides after slide 1 gets its backgroundColor set to red. But if you want the changes set to a particular slide you’d add an underscore before the css property. So if you add <!-- _backgroundColor: red --> in slide 2, only second slide gets its background color set to red.
You could also add custom styling by adding a style tag in the markdown to override the default styling.

---
<style>
pre {
 background: #1E1E1E !important;
}
</style>
# Slide 1

Conclusion

Once you get used to writing the slides in marp, I promise you that you wont look back. You won’t run into issues of improper styling such as different slides getting different font in headers. Plus you also get the benefit of version control if you upload it on something like github since it’s just a text file. And skimming through your slides is easier in a markdown file than a powerpoint presentation. I’d let it up to you to decide whether you’d want to continue using the stone age methods of preparing slides or switch to the cutting edge way of dealing with it. But I want to encourage you to give it a try. Trust me on this, your presentations will look cooler. 😇

Acesmndr/react-training-slides

☝🏻 Here is the repo where I’ve used Marp to prepare my presentation slides. You could view the exported slides in the slides folder whereas the raw Markdown files in the root folder.
Hoping that I am able to convince you to switch to Markdown to prepare slides. Do let me know what you think about it. Cheers. 🍻