How to efficiently write/code your presentation slides

Background ⏳

Marp 📐

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store