Unlike PowerPoint however this isn’t Turing complete😢

@dougmercer

Жыл бұрын

So true.

@truthmatters7573

Жыл бұрын

Don't worry, it's coming. Feature creap ftw :P

@Ddxcv98

Жыл бұрын

But html together with css is turing complete, so that makes marp turing complete?

@josk8936

Жыл бұрын

@@Ddxcv98 yeah css should be Turing complete by itself

@datboi1861

Жыл бұрын

What does it mean to be Turing Complete?

imagine you need to debug a presentation now lol

@dougmercer

Жыл бұрын

Hah! Coming from LaTeX/Beamer presentations in grad school, I *have* debugged presentations 🤦‍♂️. Thankfully Markdown is harder to mess up than LaTeX...

@Kamaropoulos

Жыл бұрын

*PowerPoint Turing Machine intensifies*

@dummypg6129

Жыл бұрын

Aren't we all just debugging everything?

@dougmercer

Жыл бұрын

@@dummypg6129 🤔 that's deep

@pumpkinjutsu1249

Жыл бұрын

No no, imagine debugging p*werpoint's proprietary xml or whatever that is

I never thought the day would come when they would make a framework for designing stand-alone power points

@dougmercer

Жыл бұрын

Never underestimate the laziness of programmers. I don't want to leave my editor/terminal!

@NathanHedglin

Жыл бұрын

@@dougmercer amen! We are lazy. We even use lazy loading 😂

@Bankoru

Жыл бұрын

LaTeX has been a thing for decades

@Dialgatrainer1

Жыл бұрын

LaTEX: Am I a joke to you?

@serpiton

Жыл бұрын

The old Opera browser, and I mean the old one, the one that didn't use chromium, made something similar 20-ish years ago, if I remember well it used html as markdown still wasn't a thing

This is way more effort than PowerPoint for anything but the most basic presentations. Glad to know it exists though

@Spartan322

Жыл бұрын

I think the biggest advantage would be that you could write yourself one consistent style and functions for said style and then everything you do could be made simple to write and would always look consistent, no need to manually manage the style of each slide. The work for one slide is useless, but if you build hundreds of slides a year, it would definitely be a speed up.

@peter0702

Жыл бұрын

I will say the latex equation support is way better than powerpoint, office software currently only word supports native latex

@btarg1

Жыл бұрын

Powerpoint sometimes doesn't do what you want it to, this approach means you can position element exactly how you want

@Finnspin_unicycles

Жыл бұрын

​@@Spartan322 What would you want to do that you couldn't achieve with creating custom powerpoint slide masters? I think automating something like translation of presentations could be easier with Marp, but that is pretty much the only real advantage I see. (Other than being markdown, which some people including myself seem to enjoy working with.)

@mart6792

Жыл бұрын

Except for code, it's easier to display it :)

Tbh, I think this is good for making presentations with syntax highlighted code, but I think Google Sheets or LibreOffice Impress are more powerful and accessible for most purposes. The fact that I can’t export to an editable PPTX is a dealbreaker for me.

So, simpler than TeX and in a format familiar to devs. Pretty cool! In the future, there will be a code-free version with built in diagrams and figures, maybe a slideshow mode for presentations, a little highlighter you can use while presenting, and...

@ranggakd

Жыл бұрын

like mermaid in markdown you meant?

@jesseparrish1993

Жыл бұрын

@@ranggakd Like Powerpoint

@remi1771

Жыл бұрын

Clever and it should be namet somethinnh like emphasis on the point... or... powerpoint!

@morgan0

Жыл бұрын

yea this reminds me of using some TeX derivative to make presentations, tho instead of dealing with TeX annoyances you have html/css annoyances but a bit less customization

@andywub

Жыл бұрын

i'm working on a startup for exactly this specific use case! we're thinking of calling it Point or Slides

Marp looks like an interesting thing, but also kudos on the editing - it's insanely good.

@dougmercer

Жыл бұрын

Thanks so much Andy =]! The aim for my channel is "clear, concise, overly edited educational programming content". So, if you're enjoying my style of video, be sure to stick around or check out some of my other videos!

@swantoinepranks4651

Жыл бұрын

@@dougmercer do you by chance watch Lazy Artist and edit with davinci resolve? :D recognized some of his tricks/patterns in you Work/editing style. Looks great

@dougmercer

Жыл бұрын

​@@swantoinepranks4651 I do-- I copied one of his tutorials for my title card whole cloth. Big fan! And yes, I do use Resolve. It's great software

Thank you for making this, you cleared up some of my confusions around the custom css styles!

@dougmercer

Жыл бұрын

Glad to hear! Thanks for watching!

That's some super cool way to make a slide! Thank you so much, Doug! I will definitely incoporate this into my skillset for damn sure

Interesting. I think I’ll stick with Keynote for now. But I can see this being interesting for generating slides programmatically for, e.g., release notes for your product. Instead of a simple list of changes you could have a slide per change with the name of the issue resolved as a title and the description of the issue in form of bullet points. Even better: if you have a use case where you need to periodically update an existing presentation with new values. Instead of doing that manually, just let your build process generate those slides with updated values for you. You could make slides highlighting the code quality of your code, showing metrics such as average lines of code per function or complexity metrics and how they evolved over time.

You can always use tables to have grids of any size. All you have to do is to hide borders via css without defining your own grid, and it works fine for small content!

@dougmercer

Жыл бұрын

Oh that's awesome! I'll have to try that later

@etekweb

Жыл бұрын

You can also use `display: grid` to make grids of any size. Just set your `grid-template-columns` value to the size of each column. Then you don't need to add extra CSS to remove the borders, among other advantages. For example, you can use fractional units to easily make a certain number of columns - `1fr 1fr` for two equal columns, `2fr 1fr` for one large and one small column, `1fr 1fr 1fr` for three equal columns, etc. The "repeat" syntax used in the example is designed to automatically add equal sized columns for you (so you don't need to specify an extra "1fr" manually to add another column). If you want more rows as well, there's a very similar `grid-template-rows` that works in much the same way!

@dougmercer

Жыл бұрын

​@@etekweb good to know!

This is awesome! I just introduce Ansible to our team, and presented it using markdown. This thing looks really cool!

Nice video, for years we have been used to create slides using only the mouse, however Markdown is also a great format for creating and editing, instead of using a specific program for opening pptx files for example, you can just use whatever text editor you want! Worth noting that there is an alternative to Marp, which is slidev and it has a ton of great features

@dougmercer

Жыл бұрын

Yeah-- there seem to be a bunch of markdown -> slide renderers, but Marp was the first I landed on and learned. Maybe in the future I'll do a comparison video... In any case, I'll have to check out slidev!

Thanks for this! I was just fighting my brain to move away from PP to Quarto, seeing all the nice ways I can integrate live graphs and maps. This helped get the basic syntax down!

@dougmercer

Жыл бұрын

Glad I could help!

powerpoint is honestly underrated

@dougmercer

Жыл бұрын

When it's the right tool for the job, I agree! That said I avoid it when I can, and Marp saves me a ton of time.

@GildonUser

Жыл бұрын

I can see how this would help. A nice tool to have in my toolbox. But, I'd still prefer ppt, the ease of creating custom designs, animation and transition (like morph). Adding add-in helps a lot, makes it much faster in editing or creating.

@javierflores09

Жыл бұрын

@@GildonUser Yeah, Marp looks cool but it is nowhere near as capable as PPT. I can see it gaining popularity in the developer community though

@ararune3734

Жыл бұрын

@@dougmercer I don't see how it could possibly save you time to find workaround to do something which is so simple to do in Powerpoint. Honestly, it seems like people are solving problems which don't exist.

@ararune3734

Жыл бұрын

@@javierflores09 Maybe, only if Github allows you to slide through it right from the repository, for very minimal presentations that give you a clearer idea of what the project is about

This reminds me of Quarto, except for presentations instead of documents. It looks awesome!

This is absolutely phenomenal. Thank you!

@dougmercer

Жыл бұрын

Glad you liked it!

I watched your video for the first time, all the transitions and animations and all you use. It's really creative!

@dougmercer

Жыл бұрын

Thanks! =]

what a awesome tool! i will certainly use this! thanks mate!

A big reason to why this video blew up is the well done thumbnail. Great video too, keep up the good work!

@dougmercer

Жыл бұрын

Thanks so much! Maybe I need to simplify some of my older thumbnails 🤔

I've definitely been trying to tinker with getting Pandoc to render my lectures, but keep running into difficulties with theming and code scaling. This looks pretty solid, and being able to drop CSS in there is awesome. Great video Now to get wild see if it supports embedding, and if my LMS can handle putting the HTML outputs up so my students can tweak Python tutor code mid-slidedeck.

@dougmercer

Жыл бұрын

I haven't tried embedding s-- I hope it works for you and your students!

pogars, bootiful editing and totally sold me

I love this! I wish I had a reason to do a presentation where I needed to show code blocks because this is so clean!

i love this because i am looking for any reason or excuse to use markdown in anything.

@dougmercer

Жыл бұрын

Same. Changing my weekly status update from PowerPoint to Marp was a game changer for me.

Interesting. However seems like it would only really be of more benefit than PowerPoint in cases where you want to programmatically generate a presentation. Regardless, great video! Love the editing.

@ure2grit931

Жыл бұрын

So this is great with chatgpt

@Croissinate

Жыл бұрын

@@ure2grit931 ok that's a great idea actually

Honestly, I’ll dabble with this. Seems REALLY good for making nice looking, simple presentations.

@dougmercer

Жыл бұрын

Glad to hear!

Idk. Seems more intuitive to make your slides in ppt instead of markup. Maybe marp is great for automating and trying to keep your source code and docs in sync with your presentations.

@dougmercer

Жыл бұрын

That's fair. If you're putting together quad charts or other complex format slides then PowerPoint still makes sense. For me, where most of my slides are simple bullets, images, syntax highlighted code, and math, Marp is way faster for me. For code, I can simply copy/paste the code's text and have editable highlighted code. I'm not sure how to get nice, highlighted code in PowerPoint besides screenshots from an IDE (non-editable) or some more complex workflow with Pygments.

@bhavyajain638

Жыл бұрын

@@dougmercer this works in word, not sure of ppt... to get highlighted code, just copy from a code editor, and keep the source formatting. PS: don't forget to switch to the light mode...

@josk8936

Жыл бұрын

To be honest as someone with a good understanding of html, I know the possibilities of it and for me could be faster to create cool presentations with markup and html than ppt. But that's where your preferences help you to choose one of the other

@ure2grit931

Жыл бұрын

This is good with chatgpt though, can quickly generate the text for a presentation with it

Ah man, this will be extremely helpful for me. Thanks!

@dougmercer

Жыл бұрын

Glad to hear! Thanks for watching!

this is actually good, I'm impressed

Loved the flow of this video. Subscribed 😁

@dougmercer

Жыл бұрын

Glad to hear! Thanks for subbing!

Small markdown tip: if you're defining code blocks often, then file extensions work just as well (so ```py instead of ```python or ```js versus ```javascript). Saves you a few seconds over the course of a year!

@dougmercer

Жыл бұрын

Oh neat, I didn't know that! Thanks for saving me time =]

Thanks for sharing the 'm gonna try it out later.

wow, amazing, thank you for providing us this awesome extension

@dougmercer

Жыл бұрын

I didn't create it! I just use it frequently and wanted to share =]

Aaaaaaaaa I always loved the minimalism of Markdown and always made my slides very minimalistic that's perfect!!!!!!

Thanks, Doug. Very helpful and an easier alternative to using pandoc.

Its very useful for people in hackathons where u have to write code and create a ppt as well...😚

thought this was a really big channel - turns out you've only got 1k rn keep it going, the editing is super high quality and the content is amazing too

@dougmercer

Жыл бұрын

Thanks so much! Believe or not, before this video I had ~200 subscribers! I'm so thankful that this video is blowing up.

The great thing about this is that you can create basic presentations with simple scripts. So let’s say you have a python notebook, you are now able to convert this into a presentation. You have a website and want to show it in a ppt presentation (why not do a live demo…? Doesn’t matter) you can script it quite easily.. so now this is an amazing thing.

I always thought about this being a thing. 🙌

holy shit this is so good, i didnt even think of this kind of making presentations hopefully i find something like that for vim

this is a cool way to make one thank you

Much much love the presentation! But I do wish there is a code where you can animate some text or divs (AND your editing is sooo fricking cool!!)

@dougmercer

Жыл бұрын

Thanks Drezz! I haven't tried it, but it looks like Marp experimentally supports transitions in "Marp CLI" (no Marp for VS Code support, yet) marp.app/blog/how-to-make-custom-transition . Let me know if it works! When doing research for this video, I also stumbled across this demo that combined Marp and "reveal.js", codesandbox.io/s/nw80vrxvpp . That said, that demo uses the lower level "marpit" which more explicitly exposes HTML/CSS rather than the plain old Marp markdown syntax. Alternatively, you could make the jump to use reveal.js entirely, revealjs.com/ Thanks again for watching (and for the kind words =])

I want to thank you for this video, it started me on using Marp and while it's quite simplistic out-of-the-box, it's fully customizable with some css tinkering and in conjunction with vector graphics software, such as Inkscape. I think I'm about ready to forget Powerpoint, except when it's required at work.

@dougmercer

9 ай бұрын

That's awesome to hear! Glad it was helpful =]

Such a high quality video!

@dougmercer

Жыл бұрын

Thanks Charles =]!

Learned a new skill. Good stuff @Doug

@dougmercer

Жыл бұрын

Thanks Abhijeet!

Wasn't impressed at first (esp. the picture + text solution), but you had me at "supports custom css" lol! Definitely will be looking into this. -I wonder, while it doesn't support slide transitions like powerpoint, would it be able to render the css animation property?- Edit: Just googled a bit, it actually does seem to support custom transitions with several css properties even, very cool

@dougmercer

Жыл бұрын

(Was in process of replying, but it looks like you already stumbled across some of the same stuff I did.) I haven't tried it, but it looks like Marp experimentally supports transitions! marp.app/blog/how-to-make-custom-transition . Let me know if it works! When doing research for this video, I also stumbled across this demo that combined Marp and "reveal.js", codesandbox.io/s/nw80vrxvpp . That said, that demo uses the lower level "marpit" which more explicitly exposes HTML/CSS rather than the plain old Marp markdown syntax.

@Krudesis

Жыл бұрын

​@@dougmercer Yea, just came across marpit as well. As someone who has done quite a bit of front end web-dev, I can see some wild possibilities for slide designs and transitions that would never be possible in PowerPoint. Though I do wonder how easy (or difficult) it would be to collaborate on this. Doubt most non-coders would be comfortable using this instead of Google Slides. Maybe a mixed workflow, where the backgrounds/general designs are done in marp and then exported as pptx could work though.

@dougmercer

Жыл бұрын

I haven't messed with working in pure marpit-- I do think it could be harder to onboard collaborators if you get too exotic. I have a bit of a blind spot on how much complexity (if any) you can boil into your own custom theme. You might be able to bake the fanciness into a theme (total speculation-- sorry if I'm wrong!)? In another comment thread, I mentioned that I had a workflow where I: * Set up a Gitlab repository for my presentation * Set up a Gitlab CI pipeline that used the Marp CLI docker image to render the slides and deploy them to Gitlab pages You might be able to set up something like that so that your collaborators wouldn't need to install Marp CLI, and could just focus on modifying the content after you establish the style/themes/etc.

Note that you can do exactly that with revealjs in Quarto in Rstudio or use package xaringan in Rstudio.

This is exactly what I’ve always wanted

your editing is insanely good

@dougmercer

Жыл бұрын

Thanks Micael!

you got some high quality production skills, realy enjoying your style

@dougmercer

Жыл бұрын

Thanks so much Tzoor! Comments like yours make my day =]

I really like the video editing ♡

@dougmercer

Жыл бұрын

Thanks so much, Astha =]

thanks Doug, very cool

Reminds me of LaTeX Beamer which we used at university. It had more features, though.

@dougmercer

Жыл бұрын

Beamer is great! The use case for this, to me, is "good enough for common tasks, faster"

I haven't used PowerPoint to make presentation in years. I use it for drawing and creating movies and illustrations. Writing books and making games.

It remembers me a little of reveal.js. Back in my middle school I've been asked to make a simple quiz with some math and code in it, and I chose this library to build it, together with a little bit of custom js code. It doesn't use markdown, it's rather focused on using appropriate html tags. Since then 've discovered some other tools I can't imagine using powerpoint at all.

@dougmercer

Жыл бұрын

Yeah, I've heard good things about reveal.js-- what other tools have you landed on now?

@aradanat231

Жыл бұрын

@@dougmercer to be honest I haven't had to use them for some time. Last time I think it was beamer, because I've had to learn LaTeX for my university.

@dougmercer

Жыл бұрын

Ah yeah, Beamer+LaTeX are great for math focused stuff

I used vscode-reveal a couple of times which utilizes revealjs. Would be great to see a comparison of the two, and other alternatives if available.

@dougmercer

Жыл бұрын

That's a good idea

This is great. AND it’s open source, which is extremely based

awesome thanks!

markdown for slides? I like this. Thank you!

@dougmercer

Жыл бұрын

Glad to hear! Thanks for watching =]

Thanks for explaining how to use this tool. It was very useful.

@dougmercer

9 ай бұрын

Glad it was helpful! Thanks for watching

Buenísimo, me a encantado está herramienta y muy buen tutorial

@dougmercer

Жыл бұрын

Gracias! =]

The idea is good but you can also put programs in the powerpoint using add ins such as script lab, pick it for images, and many more.

Perfect! Now I can code my PowerPoints. Who needs a gui editor anyway?

Great overview, thanks 👍

@dougmercer

11 ай бұрын

Thanks! Glad it was helpful =]

This seems overly complicated for no real reason. I love it!

@dougmercer

Жыл бұрын

😂

Marp is great, thats why its used on places like github and gitlab for readme files. I just actually made a bit more complex md file for a repo

@benoitgrasset

Жыл бұрын

You mean Github uses Marp ?? Can you show us your md file ?

@widevader

Жыл бұрын

@@benoitgrasset it was for a professor so i wouldnt like to doxx my self, cause there is my name and my school on that readme

@widevader

Жыл бұрын

@@benoitgrasset well it uses markup documentation. And marp is markdown presentation tool. So yeah, i mean have you ever seen a readme file on github or girlab, it looks all nice but its written in a markup language.

I recommend Pandoc for Markdown -> slides via LaTeX Beamer

Thank you!!!

@dougmercer

Жыл бұрын

Thanks for watching!

I remember having to use something similarly to this but for writing PDFs during a college class

Love the idea behind marp and what it could accomplish so far plus your vid is absolutely on point But the truth is, I’d still need to sell my soul to big corps (ppt, google slides) or libre suite on the other spectrum because the apps are much simpler and faster with batteries included

Cool!

Dope video editing !!!

@dougmercer

Жыл бұрын

Thanks so much! =]

Great video. Thank you

@dougmercer

Жыл бұрын

Thanks for watching!

Love your editing! Also, I'll have to check how easy is to make a template with this or something similar. I like using Beamer in LaTeX but making a template for my company is a bit of too much work for that tbh

@dougmercer

Жыл бұрын

Thanks! I haven't tried making a custom theme in Marp yet, so I'm not sure how tricky that will be... If you do end up trying it, let me know how it goes!

A slightly more polished version of this (but not free and currently in Beta) would be iA Presenter. Have played around with it a bit, and while there is room for improvement it’s a pretty awesome tool.

@dougmercer

Жыл бұрын

That looks pretty cool-- first time I'm hearing about it

Awesome edition

AWESOME

it really good but i want to do this whole prosses in a laravel app that i'll create is it doable

@dougmercer

5 ай бұрын

Sorry, I have no idea-- I'm not really familiar with laravel.

Looks really good. But does it support graphs that are linked to a data frame like excel tables a no graphs can be linked and updated on the fly in PowerPoint.

@dougmercer

Жыл бұрын

Unfortunately, it doesn't support that.

This channel is amazing

@dougmercer

Жыл бұрын

Thanks so much! =]

Marp is awesome...but what it (and VSCode's regular markdown render need) is MERMAID support! With Mermaid, you can generate flow charts, UML, and other diagrams. It's rendered with JavaScript.

@dougmercer

Жыл бұрын

Oh man, I totally agree. I love mermaid. What I do (which I don't love) is use another mermaid plugin to render the chart to file and then embed the graphic. It's very annoying to maintain separate documents though!

Now you have to center a div inside PowerPoint

@dougmercer

Жыл бұрын

Uh oh 😟

I'm gonna share this with my class

@dougmercer

Жыл бұрын

Thanks so much! glad you liked it! =]

The employee in me supports this because markdown is where 100% of my non-code work lives. The engineer in me strongly opposes this as I am pretty sure every presentation made via a slide deck could have been more effectively communicated in a different medium. Still though, this is cool and definitely will have uses for me at some point and opens up a way less frustrating alternative to opening PowerPoint and fighting against it the entire time to get what I want 😂

would using flexboxes work for multiple columns / complex block placements ?

@dougmercer

Жыл бұрын

I'm not sure-- someone else said that tables work, but I haven't had a chance to try that either. If you try it, please come back and let me know!

Hi Doug, thanks for sharing! I'm a newbie to programming. As you mention in the video, Marp supports HTML code, so I assume that Marp supports CSS too, is it right?

@dougmercer

Жыл бұрын

Hi Quang! I'm also a newb at HTML/CSS, so no worries there! In Marp, I stick to an included theme and at most add styles to spans. You can see some examples of adding custom CSS at 3:42 (and totally in-lining the style within the HTML here 4:39). So, if being able to write styled HTML with perhaps factoring out some of the style names, then that would be the easiest way to do it. You could also try to create your own Marp theme. It looks like a theme is essentially just CSS marpit.marp.app/theme-css. I believe you can create a theme and configure your Marp for VS Code settings to support the usage of the theme. Maybe that would work for you? If you want to have an external style sheet that isn't a theme, I *believe* (am not certain!) that you wouldn't be able to use the "Marp for VS Code" plugin and would have to instead use the "Marp CLI". I found some discussion of importing CSS here, github.com/marp-team/marp-cli/issues/266 . There may be a newer discussion somewhere. Hopefully that helps! Let me know what you end up doing!

@monosias

Жыл бұрын

​@@dougmercer thanks for clarifying. I currently have a small project, it's a personal page that works as my résumé. I think I could create something with Marp to showcase my work on the page. Still loads of work to do so I may have to ask you more in the future ^^

Fantastic tutorial

@dougmercer

Жыл бұрын

Thanks! Glad it was helpful =]

Which software do u use for video editing? I wanna use vector graphics and make presentation type videos

@dougmercer

Жыл бұрын

I use Davinci Resolve. You can try the free version! It lets you do just about everything (this is only my second video using the paid version). Check out "Casey Faris", "Patrick Stirling", "JayAreTv", and "Lazy Artist" for great Davinci Resolve education content!

Can't imagine switching to this in my worst nightmare. Making presentations using a GUI is already hard enough so it's a no-go. But this one looks cool and I already have vscode, so why the heck not!!!

@dougmercer

Жыл бұрын

That's the spirit!

Great video! My favorite part was when he said "It's marpin' time" and then marped all over the place!

one person i know made textures for a game using powerpoint how do you make textures in shmarp

@dougmercer

Жыл бұрын

You're right-- it's not the right tool for the job ¯\_(ツ)_/¯

Can I use overlays in Marp? Overlays as we use them in Beamer (LaTeX)?

@dougmercer

5 ай бұрын

To my knowledge, Marp only supports a pause-like behavior for fragmented lists (bulleted lists with * for items would appear one at a time). So, not as general as beamer. I'm not familiar enough with overlays as a concept to know what other beamer commands you'd be interested in analogs for

Seems cool with the theme but needs alot more features to make me transition to it. Perfect for those who have tons of presentations to make like our school teachers 🤣🤣

Great video! Though the editing feels a bit confused at times

@dougmercer

Жыл бұрын

Thanks! 🙃

Damn! You can use a neovim and marp and no one normal person will undestand that you JUST MAKING A PRESENTATION

PowerPoint's auto designer is heavenly though. Just slap some text on slides and have PP to handle the design.

How can I have css autocomplete for Marp/markdown

It is harder than powerpoint and to rn it you need mapr+md viewer?

1990: let’s make a tool for handling this presentation scripts visually 2023: Yo let’s code some powerpoint

I wouldn't mind using it, actually I like the custom ability of it without having to worry about dragging and dropping. Specially seeing that I know css (to a point), and this code doesn't seem too to learn.