Presentation Slides with Markdown | Hacker News Reader

Presentation Slides with Markdown

sli.dev

273 pointssadeshmukh91 comments

Open articleView on HN

For more like this: Check out marp[0], presenterm[1] and reveal.js[2]

[0] https://github.com/marp-team/marp [1] https://github.com/mfontanini/presenterm [2] https://revealjs.com/

I'd also like to throw my own app into the mix

http://hyperdeck.io

For iPad and Mac only, to save others a click.

This looks cool, but is it still maintained? Changelogs mention iOS 14 only 5 dot releases ago.

https://docs.hyperdeck.io/changelog.html

My first time seeing presenterm, very cool. I will seriously consider using this in the future.

Quarto is also nice and builds on top of reveal.js for slides

There's also the closed-source iA Presenter[0], which makes some great-looking slides. It's paid and Mac-only though.

I use Quarto with reveal.js and love it. I teach and particularly like the multiplex plugin[1] to sync the presentation on multiple devices. My students can open it on their laptops and I control the changing of the slides, but they can click on links or interact with the presentation themselves.

[0] https://ia.net/presenter [1] https://revealjs.com/multiplex/

I really like these presentation-as-code tools in principle, but in practice I find that they can be a bit limiting. However, I haven't used them enough for this to be anything more than a general sense. Does anyone have an opinion on this?

I tried out reveal.js for a while but, especially with Google Slides coming in, I found it limiting and increasingly the collaboration component of Google Slides was becoming more and more important to me at the time.

I rarely need anything more than bullet points or an image in my presentations, so I don't find them limiting. However, most of these allow arbitrary HTML/JS/CSS, so I wouldn't say they're that limiting. I occasionally include iframes, for example.

The big downside for me is you don't have easy pixel-level control over layout like you do in PowerPoint or Google Slides. Even changing font size, for example, is a little clunkier. I hear some people also miss being able to draw diagrams and flowcharts.

Limits can be good. I - like most people put too much on slides. Simple slides are good.

the reason complex tools can do so much as each feature is needed in some obscure case. However because it is there presenters are tempted to use it when they should not.

You could pick an ecosystem with more power to control the finer details if and when that's needed. Typst is a LaTeX replacement with a syntax sort of in the markdown family of syntaxes (https://typst.app/docs/tutorial/writing-in-typst/), but fully programmable and with nice visualization options.

https://typst.app/universe/search/?category=presentation

e.g. https://typst.app/universe/package/touying

Gets you powerful "frame by frame animated" slides when you need it, like this tracking program execution: https://raw.githubusercontent.com/typst/packages/main/packag...

Gets you decent diagramming e.g. https://typst.app/universe/package/fletcher/

pandoc has a reveal.js backend which I use it to build my slides from markdown (with a few ad-hoc inline css tweaks)

I really like reveal.js, you can use all the modern web technologies in your slides and it provides you with all you need (including speaker notes).

Even if your presentation runs offline the browser is really good place for presentations to live at. E.g. I can include live circuit simulations on slides using circuit.js and if a student asks whst would happen to the output of a signal processing circuit if there was one more component I can just add it. If a question shows up that isn't in there I press ctrl + t and search for an image or a wikipedia article on the topic.

The only thing one has to think about is maybe to create a "clean" browser profile for presentations so your suggestions and personal things don't show up mid presentation.

Why are there so many of these? Is there a reason why their creators aren't just converging on one implementation?

Here's my neo-Luddite take on this. Slides with support for notes in a synchronized second window in just 371 bytes of minified javascript, some HTML and some CSS:

    let a=[...document.getElementsByClassName("slide")]
      .map((a,b)=>[a,"slidenote"==(b=a.nextElementSibling)
      ?.className?b:a]),b=0,c=0,d=()=>a[b][c]
      .scrollIntoView(),e=new BroadcastChannel("s"),
      l=a.length-1;d();e.onmessage=({data:a})=>{c^=a.c,
      b=a.b,d()};document.addEventListener("keypress",
      ({key:f})=>{b+=(f=="j")-(f=="k");b=b<0?0:b>l?l:b;
      c^=f=="n";e.postMessage({c,b});d()});

    div.slide, div.slidenote {
        height: 100vh;
        width: 100vw;
        /* Other slide styling options below */
        ...
        ...
    }

    <div class="slide">
      Anything in here is one slide
    </div>
    <div class="slidenote">
      (optional) Anything in here is
      a note for the slide above
    </div>

You can trivially use the HTML and CSS inside markdown, so any markdown parser that generates HTML is now an ultra-lightweight slides generator.

For a deeper explanation, see Dave Gaur's original minslides[0] and my own presentation on how I added note-support to it and golfed the JS code[1].

[0] https://ratfactor.com/minslides/

[1] https://nbd.neocities.org/slidepresentation/Slide%20presenta...

I keep seeing new projects that implement things that Emacs and Org mode already do incredibly well. I guess it's a testament to how steep the Emacs learning curve is, or perhaps how ugly the defaults look.

You have ox-beamer, which lets you write your slides in Org-mode, and export using LaTeX and Beamer, which look pretty great. You can also use org-reveal, or org-re-reveal to make some visually very attractive presentations with reveal-js. And finally, if you want to actually have the presentation run inside Emacs, you can use dslide[0] which looks really nice, and leans heavily on org-babel.

[0]: https://github.com/positron-solutions/dslide

There's definitely something to be said about emacs being stuck in time. However, everything under the sun is just a half-baked clone of something emacs already had, except for text-editing :^)

Just use e-vi-l-mode for text

Steep learning curve and it's sorta an all or nothing investment. I don't particularly care for emacs despite having tried several times in earnest. IMO a tool that requires full (or at least significant) buy-in on an ecosystem isn't a great tool and warrants an alternative. I'd rather see good agnostic tools get made and then wrapped.

Whoever writes the tool that can Actually Make a legitimate microsoft office powerpoint slide from text will make a lot of money.

From what I have seen most of these tools need to do more user research on how powerpoint slides actually look like in practice.

There's a lot of "you're doing it wrong, show don't tell, just keep the basics on the slide" but the people that use powerpoint to make $$$ make incredibly dense powerpoint materials that serve as reference documents, not presentation guides (i.e. they are intended as leave-behind documents that people can read in advance)

Presentations are also quite hard because:

1. It must "compile to" Powerpoint (it must compile to powerpoint because your end users will want to make direct edits and those end users will NOT be comfortable in markdown and in general will be very averse to change) 2. Powerpoint has no layout engine 3. Powerpoint presentations are in fact a beautiful medium in which VISUAL LAYOUT HAS SEMANTIC MEANING (powerpoint is like medieval art where larger is more important)

If anyone wants to help me build an engine that can get an LLM to ACTUALLY make powerpoints please let me know. I am sure this is a lot harder than you think it is.

Do you have one of these information dense powerpoints as a reference? Is there data visualization embedded in the slides? I don't know anything about this so I'm curious.

It's consultants doing everything in PPT. Imho it is very, very annoying.

These are the slide decks that McKinsey and BCG consultants leave behind after a 6 month contract. The deck is the work product that the consulting firm got paid 7 or 8 figures for.

They are typically 60+ pages slides on something like go-to-market strategy or organizational realignment that the C-level at the hiring firm hired them to do and will forward around to his reports and teams to implement.

Each slide is handcrafted to have a punchy title and be self contained, dense, with links to references and data sources. There's a hefty appendix section so that when someone asks a "what about X?" question, there's a slide in there about alternatives considered and a data-centric reason on why it wasn't or shouldn't be pursued.

I teach the math behind AI, so my slides are very dense. Not "text heavy", but elaborate - some animations, graphics with arrows pointing to more graphics, 3-4 slides on just explaining what all the symbols in a math equation mean, and a worked example.

I would never be able to design my slides if I used a Markdown to PPT converter.

Here's one potential example of a moderate complexity slide deck generated by serious professionals : https://media.kalzumeus.com/complex-systems/334925792-Shorti...

That is a PDF copy of the actual pitch deck Deutsche Bank used for a proposed trade to take advantage of the 2008 housing financial crash by "Shorting Home Equity Mezzanine Tranches" (an incredible and lucrative prediction they made back in 2007, when the PDF was authored). The real meat and potatoes starts on page 6, but every page after the disclaimer could be put on screen as a slide in a powerpoint.

Note how nearly every slide is a diagram with title and potentially a caption. Each diagram is annotated with custom annotations explaining the concepts at play, requiring a ton of annotations. There's charts, block diagrams, process workflows, tables, and more. A minority of the pages are text-only with bulleted lists. This is an ultra high value artifact and very little of it would have benefited from a markdown->slides automation. What makes it amazing is the sheer volume and detail of very specific information, only replicable via tremendous elbow grease.

I think the use case would be limited to a handful of users (slight hyperbole).

The average user is content enough with using plain PowerPoint and won’t bother with Markdown. People using Markdown are more on the “you’re doing it wrong, put the basics on the slide” side.

The people that make nice backgrounds for their talk, sometimes with a word or two, won’t get there with a text based tool either.

People that use LaTeX, markdown or some other text to slides tool are few and far between.

The value in a presentation tool is that it can create a variety of presentations. The future of presentations will be variety (possibly via AI) to convey information in both optimal and creative ways.

> 1. It must "compile to" Powerpoint

You simple cannot compete with Microsoft on Microsoft's turf. This approach is doomed.

The most amusing thing I found about Go is that they built a presentation framework similar alongside the language. It's got some additional syntax on top of markdown but the documentation to use it can readily fit in an LLM's context window. I'd say it's good enough for many simple presentations.

https://pkg.go.dev/golang.org/x/tools/present

Interesting. I'm wondering about its future. Still nominally pre-release, v0.32, and with alternative syntaxes supported.

> in legacy present slides/sections use "*" instead of "##"

Whenever I go to a tech conference, I see slide after slide filled with a wall of text, or in the best case 3 to 5 bullet points with text only.

A picture says more than a thousand words.

As much as I'd like to use a simple markdown based tool to create my presentations, most of these appear to come short regarding visuals (1).

Look at the 2007 iPhone introduction - thats how you use visuals to deliver a message.

Going from bullets to visuals is definitely not easy, and while I'm not as brilliant as Steve Jobs, I always give it my best shot. And a supporting tool makes it a lot easier.

(1) if anyone knows about a md-based slide creator supporting good visuals, I'm open to suggestions.

I don't know if Markdown based slides are good or bad but Apple has plenty of bullet point type presentations in their WDC videos

Like here's one

https://developer.apple.com/videos/play/wwdc2023/10056/

The style for big conference keynotes and breakouts is often different (and often should be). And, as mentioned elsewhere, the production values and effort that goes into keynotes is not practical for everything else—though the level of effort different companies put in varies.

I have this discussion quite a bit with colleagues who specialize in communication.

I want to convey technical and scientific material. My presentation isn’t to motivate a billion people to buy an iPhone. My presentation is meant to inform 50-100 people to learn a new technique. And the slide deck is markers for where they can follow up later for detail and references.

I too see presentations with walls of text. I go to academic and scientific conferences. This is helpful to me. I like it better than posters. I don’t want to go to a conference and have a bunch of Steve Jobs (or more likely Elizabeth Holmes) giving one word per slide presentations.

I also don’t have 100 people working on my slide deck. It’s just me. I don’t need a TED talk.

I wish people would recognize the different purposes and audiences for presentations.

The inside joke among academicians is that our slides have wall of text because we make them on the flight while going to the conferences! Our presentations tend to be bland because the audience is reading off the slides and ignore what the speaker is saying. That's why for our doctoral students we make it mandatory to present at least twice internally before presenting to external audiences. Otherwise, they have these giant tables copied from the manuscript and pasted on the slides, which most people can't read without binoculars.

Yeah but people will put 40 lines of code on a slide and read through it, expecting that it will explain the underlying concept while I’m trying to parse a ton of code in front of my eyes.

Most of the time that I am presenting technical material, I spend it on explaining the concepts through short descriptions, hand-draw illustrations or diagrams.

If there’s code to show, it will be smaller snippets interspersed between those slides. If attendees want to deep dive into 100 lines of code, it is best that they do it on their own time at their own pace after I send out the materials.

I actually talk about code but this applies to non-technical presentations too. Yeah, it’s also not a sales presentation but don’t wall-of-text me.

Explain concepts to me.

I sometimes use text-only or text-mostly presentations. And sometimes graphics-mostly presentation work fine too. My typical presentation is probably somewhere in the middle with the caveat that I’m not presenting at academic conferences and the level of technical content varies.

I have the same opinion as you and use remarkjs a lot at work. It obeys the markdown rule that you can devolve to real html and I handle my images with real img tags and styling.

I'd honestly prefer using straight html for the whole slidedeck, but want my slides to be user friendly for others who may inherit/fork them.

What always disqualifies these projects for me is the fact that they need to use a headless browser to export to PDF. PDF export is the primary feature I need from these, and it’s a shame the export mechanism is still this slow and unreliable.

This is why I still use beamer and pandoc.

Yea.

Having intentionally stayed away from going down the PDF rabbit hole, but now confronting it again recently … what’s the deal with how sparsely populated the space is with solid and (relatively) light weight rendering solutions/back-ends?

Am I missing something or am I right in thinking that there’s a kinda pandoc/FFmpeg shaped hole in the document tooling space that no one wants to (or can’t) fill? Where tex and chrome based solutions are arguably just too heavy for a number of needs but all we really have?

Exactly, I would've hoped someone could come up with a way to render markdown directly into a PDF, without roundtripping via tex and having to handhold the styling process in the way that's required now.

The problem is that Markdown is not really a markup language, since it only defines the content and structure, but has no way to specify how it will be displayed. To go from content (Markdown) to rendered presentation (PDF) you need a proper markup languaje (HTML/Tex) to be able to specify its layout.

The reason it's hard to render straight from Markdown isn't because it's not a markup language like html - because Markdown is just syntactic sugar for a subset of html. Because of that, it's usually easier to just use the abundant html tooling to render it. The problem is that html needs CSS to render nicely - and any tool used to render CSS+HTML is almost by definition a browser engine.

I found with that revealjs slides can be exported to pdf via their tools menu, and print it. It worked on Firefox. True that it’s a manual step. But no need to rely on a headless browser as soon as you don’t want to script it.

https://quarto.org/docs/presentations/revealjs/presenting.ht...

I'm using Jupyter and typst for my slides these days. (Which depends on the audience.)

I was going to write tooling to convert markdown to typst, but typst is so easy that I haven't bothered. Of course Jupyter has markdown support, but I'm normally running code when presenting with it (did 20 hours last week).

FYI, I use decksh [1][2] a DSL (aka "little language") for decks, information displays and charts decksh generates deck[3] markup that is rendered as PDF, SVG, or PNG.

[1] https://speakerdeck.com/ajstarks/decksh-a-little-language-fo...

[2] https://speakerdeck.com/ajstarks/decksh-object-reference

[3] https://github.com/ajstarks/deck/blob/master/README.md

The company behind the minimalist writer is writer had a presenter app called iA Presenter. https://ia.net/presenter

I’ve had it for a while and it’s awesome to write all the notes and stuff in markdown. They also provided a good amount of content on how to write good presentations.

Looking at these two offerings the iA presenter tries to look great out of the box straight away versus this one where you have to mess with the layout. It helps you focus on the content. I’ve done a few presentations with iA presenter and it’s been well received — note I’m a good speaker but not a great slide maker.

Why the past tense? It looks great, will use it. I am still using iaWriter. Love that software.

I love Presenter. When I used it recently, it was the first time someone described one of my talks as “beautiful”.

Its docs also work hard to sway you away from walls of text. It’s probably a good idea to download Presenter even if you don't want to use it, just so you can read its presentation advice.

It also lets you export your presentation plus speaker notes to a PDF later to distribute to your audience.

been using this for years, still great

For those using Obsidian: https://help.obsidian.md/plugins/slides

I like these projects but in my experience the four most common products people use for making slides are Google Slides, Canva (mostly by undergraduate students), PowerPoint, and Keynote. The common thread is the ease of use. So it's difficult to see why someone would switch to another product.

It’s definitely niche, but one of the best presentations I’ve ever seen was done in godot [0]

One of my coworkers copied our PowerPoint theme, built a super basic presentation mode with transitions and used the engine for interactive demos live in the slides running the code.

[0] https://godotengine.org/

that's some madlad ability.

I am not sure how he managed to do it, I tried building a very simple game in godot and it took me way too much to figure out the physics etc. part, though that might be because I was making a simple shooting game like space invaders but with red and green squares and ability to rotate ...

Using godot to do this does seem to me pretty cool since godot is more interactive than lets say pygame but I am also still not sure how he managed to do it in godot, I would love it if your co worker could write a blog post explaining how he did so in godot!

I once wanted to create a presentation tool in ebitengine in golang just for fun and oh boy I failed miserably hard.

I genuinely like this idea. I had heard of this idea of using godot for unconvential usecases a long time ago in some HN post but seriously , while writing this post, I realized that your co worker could have also actually made a way to run that powerpoint tool in wasm since godot can compile to wasm and its kind of insane that you can get android,ios,web,every single desktop support while still not being electron or heavy on javascript.

I did find this https://github.com/GDquest/godot-presentations which is pretty interesting though I wish that some kind of video tutorial could go in hand with this because I am not that level of familiar with godot to actually run this

I usw pandoc to create slides from markdown: ```pandoc -t beamer slides.md -o slides.pdf``` And if you prefer HTML+JS slides, pandoc can do that too: https://pandoc.org/MANUAL.html#slide-shows

What is the advantage over the reveal.js / quarto eco-system. I’m using that for my lectures, and am really happy about it (especially since it’s pretty easy to make an llm add automatic speaker notes and timing information)

Not bad but I ended up writing a lot more CSS/HTML than I thought I would. Made me wonder if i should just write reveal.js instead.

You can see it here: https://github.com/fzakaria/learn-nix-the-fun-way https://fzakaria.github.io/learn-nix-the-fun-way/1

I liked putting the commit SHA on the title slide :)

Thanks for sharing! Some great slide transitions in there with your code examples

I used to use https://github.com/webpro/reveal-md , which is a very thin layer on reveal.js.

I use something like this, indirectly.

HedgeDoc [1] (a markdown collaborative pad tool) also uses reveal.js to build presentation slides from markdown pads. It's quite easy to use and works very well. Also it supports LaTeX for math and code highlighting.

The presentation mode is able to manage a dual screen interface so the speaker can have a timer, see the next slide, and some private notes if necessary.

Very cool!

[1] https://hedgedoc.org/

I have been using https://www.deckset.com/ for the same for years and have no complaints.

Slidev is awesome. I'm working on something like this but for forms: https://forms.md

The tool looks nice. I've used revealjs for this use case before so I was happy to see your comparison documentation: https://sli.dev/guide/why#comparisons

I use a small patch [1] to revealjs [2] hosted on GitHub pages [3], just point it to a markdown gist

[1] https://github.com/hakimel/reveal.js/compare/master...rectal...

[2] https://github.com/hakimel/reveal.js

[3] https://gist-reveal.rectalogic.com/

Used this in the past and it's my favorite tool to make presentations now. It's really the most dev friendly tool I managed to try, and I guess I tried a few.

The most interesting thing for me is that you can write your own Vue components for your most specific use cases. Makes it easy to write some rather interactive slides. And it saves you from having to learn some presentation-specific software, some motion design or video making tool. Just quickly code your way through everything.

Quite refreshing to build slides that way.

I’ve tried out a few of these, and iA Presenter seemed to be the only one that can handle arbitrary long text by dynamically changing the font size. However I wish you could specify a floor and ceiling for the font size so that fewer lines of text didn’t look comically big. Do folks have recommendations for markdown slide software that can strike this balance? I remember slidev would cut off text when it became too long

I wrote my quick and very opinionated solution for this: https://github.com/cavenditti/quickslides

Just a little Python to generate a Typst file and then render it.

It won't fit everyone but for me it's quick, flexible enough and creates good-looking slides.

What is nice of the text/code based presentation tools is that you can easily have them be generated by an LLM: I’ve used it to generate a revealjs based presentation to explain a code base, including svg based (sequence) diagrams to illustrate the flow, based on the LLM (windsurf) inspection of the code base.

I'd just like to throw https://hedgedoc.org/ into the mix here, for anyone looking for a collab + notes + presentation selfhosted thing.

I've been trialling it for a little while and loving the whole experience so far.

I’m using slidev as my main software for presentations on a mostly msoffice based company. I can export to pptx format (it’s screenshot image based though) which makes my colleagues happy for some reason… I’m using the integrated mermaid support to add simple architectures schemas or simple database driven charts.

I tried something similar some years ago, maybe 10 years ago or more, finally I didn't find a way to make it profitable ... and lost myself.

https://github.com/juanpabloaj/platon

Love the concept, am a big fan of these kind of solutions. I can see it also being a use case for non-technical teams to ensure some kind of design consistency. Sales can be horrible in presentations and slides.

This looks very useful to get llms to generate slides. It would be nice if it had an llm.txt I can add as a context directly. Maybe an MCP server too

Latex with Beamer is amazing. I haven’t made slides with Microsoft and Apple software for a long time. Do they make better slides?

I'll have to try it and see if it's better than Marp next time I'm building a presentation.

I use Obsidian. That way my slides are just notes in my existing knowledge base - searchable, linkable, etc

Do you have good AI integration into obsidian?

So far I write a rough draft in obsidian copy into chatgpt / claude then copy back into obsidian. I'd love a way in app to work in more a fluid way. Much like how Notion has its simple AI actions (improve this writing, etc).

I don’t but to be honest I don’t use AI in this way

pretty cool seeing all these approaches for making slides with code, makes me kinda curious whether the tool or the workflow matters more in the end - you think the actual structure of a talk really changes based on how easy the tool is?

Reminds me of:

https://slides.com

Yes, it’s more or less reveal.js based as I understand it. I tried it for a while a number of years back along with some other folks at my company. But the company largely standardized on Google Slides and I went in that direction too.

Isn't this inherently flawed?

If markdown can be used to create your slides, it seems like you're incorrectly using slides as a medium ... when instead, you should be writing a memo.

Note: I'm not hating on the product. Just asking a higher level meta question.

(I'm not affiliated with this project.)

I like using Markdown for all sorts of "human and machine readable" tasks these days. Text-only formats are really, really nice, and Markdown has formatting-for-display built in, so using it as a text format for defining slides seems like a natural extension to me.

Maybe you're saying, "You shouldn't use slides. You should be writing a memo!" I guess that is a different take from my assumptions which was: "Sometimes I want to make slides. I'd like them to be easy to author and edit in text. Maybe Markdown would be nice..."

For Emacs, Org-Present and epresent work well.

the minute a CoolNewThing uses npm I'm out. Not gonna install hundreds of vulnerable dependencies for CoolNewThing

Suprised nobody here ha mentioned sent.

what a great landing page explaining the basic concepts. kudos whoever worked on that.

very useful! is custom / tailwind css also supported ?

belicimo

Reply on news.ycombinator.com