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 ⏳

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.

Writing Marp Presentations 📝

---
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 🎨

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

Conclusion

☝🏻 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. 🍻

Just another guy who wants to make world a better place!