7 ms·

Marp: Markdown Presentation Writer

194 points by pplonski86 8y ago

bklaasen 8y ago
This is a terrific tool which I've used several times to rapidly assemble presentations. If you're already fluent with markdown, Marp is a very natural fit. I find working in heavy-duty presentation software packages to be like running through glue. Instead of creating content, I get caught up in pixel-pushing to make everything look right. Marp offers a couple of styles. It's very refreshing to use. Best of all, it'll output nice-looking PDFs that you can share afterwards. Recommended. I have no affiliation with Marp or its creator - I'm simply a happy user.
thangalin 8y ago
The Chain-of-Responsibility software development design pattern provides a way to separate a source document (Markdown) from its final presentation format (PDF). On a related note, I've developed an open source editor that can edit Markdown, R Markdown, and XML documents[1][2]. The input document is translated in real-time to HTML. Using the Chain-of-Responsibility pattern[3] makes it straightforward to introduce additional processor chains, which could include slide show output via CSS. On a minor technical note, including HTML tags (such as <small>...</small>) defeats one of the key benefits of Markdown: separation of content from presentation. An alternative is to use named blocks to classify text, such as[4]: ::: footer Copyright 2019 ... ::: [1]: https://github.com/DaveJarvis/scrivenvar https://github.com/DaveJarvis/scrivenvar [2]: https://github.com/DaveJarvis/scrivenvar/blob/master/USAGE.md https://github.com/DaveJarvis/scrivenvar/blob/master/USAGE.m... [3]: https://github.com/DaveJarvis/scrivenvar/tree/master/src/main/java/com/scrivenvar/processors https://github.com/DaveJarvis/scrivenvar/tree/master/src/mai... [4]: https://pandoc.org/MANUAL.html#divs-and-spans https://pandoc.org/MANUAL.html#divs-and-spans
- leejoramo 8y ago
  For a very long time I have extended Markdown for my writing style. I too use the ::: notation for <div> blocks. I have always used MD as a loose idea which I can change as needed.
andrewflnr 8y ago
> MARP: MARkdown Presentation Writer. Like Powerpoint, but You Only Have To Only have to what? Not the first title I've seen today where someone accidentally a word.
- gammateam 8y ago
  > but You Only Have To you only have to do all these extra things in a convoluted syntax deep down, you already knew
- dewiz 8y ago
  I see what you there. The title has been fixed, I noticed that too, and I'm always advocating for removing artificial barriers such as HN limit on titles. When truncating a title HN could for example show the complete one onmouseover or use some JS to expand the title.
nine_k 8y ago
From a brief look at the code I suppose that the app is monolithic. I wish it was split into the processor and "IDE". I'd be able to use my preferred editor instead. I'd be able to run an md -> html -> pdf pipeline in a lightweight, headless build script. Just saying.
- gitpitch 8y ago
  If you want true separation between processor and "IDE" for your decks check out https://gitpitch.com https://gitpitch.com - modern slide decks for developers on Git. Use your preferred editor - vi, emacs, atom, etc. to create your slide content. The build pipeline is a simple git-push. Your slide deck is then instantly available for sharing online and for download as self-contained bundle or PDF. A dedicated desktop tool is also available that gives you live previews and speaker support offline. You can also export your decks to Microsoft PowerPoint, Apple Keynote, and Google Slides. For a sample GitPitch slide deck see here: https://gitpitch.com/gitpitch/demo-deck https://gitpitch.com/gitpitch/demo-deck
- ziotom78 8y ago
  Marp Next is supposed to be what you ask (scroll down the page to find more), but it's still in development.
- rcthompson 8y ago
  > I'd be able to run an md -> html -> pdf pipeline in a lightweight, headless build script. This is how I make my presentation PDFs from Markdown files using pandoc (except I think for me it's md -> latex -> pdf). I use Snakemake[1] to automate it using the following Snakefile: https://gist.github.com/DarwinAwardWinner/5c3fd8fb82757bb04a0a36bda7f2c73f https://gist.github.com/DarwinAwardWinner/5c3fd8fb82757bb04a... The idea is that you write presentation.mkdn, and then run "snakemake", which runs pandoc to produce presentation.pdf. Any images you include should be in a subdirectory called "images". If you have "images/giraffe.svg", you can include "images/giraffe.pdf" in your presentation and it will convert it for you automatically (using Inkscape's CLI), and same for pdf to png using ImageMagick. [1]: https://snakemake.readthedocs.io/en/stable/ https://snakemake.readthedocs.io/en/stable/
acemarke 8y ago
The React community has started to make some tools that use the "MDX" format [0], which combines Markdown and JSX syntax together. The MDX-Deck [1] and Spectacle [2] tools both allow using MDX to create presentations. Last week I wrangled together a repo that adds Spectacle with MDX support to a Create-React-App project, as a reusable starting point [3]. Worked out nicely for a talk I gave this week. [0] https://mdxjs.com/ https://mdxjs.com/ [1] https://github.com/jxnblk/mdx-deck https://github.com/jxnblk/mdx-deck [2] https://github.com/FormidableLabs/spectacle https://github.com/FormidableLabs/spectacle [3] https://github.com/markerikson/cra-spectacle-mdx-boilerplate https://github.com/markerikson/cra-spectacle-mdx-boilerplate
Sytten 8y ago
I think this link https://github.com/marp-team/marp https://github.com/marp-team/marp is more relevant since this was the preview app and the ecosystem is now much more extended.
- yaleman 8y ago
  Definitely backed up by the tiny text on OP's page: "We have already dropped maintenance." ... so, don't use this one?
gallerdude 8y ago
Is Markdown really the best tool for this job? I love markdown as much as the next person, but it was designed for writing, not for slides. Maybe I'm naive, but it feels designing your own markup language for slideshows would make a lot more sense.
- m_mueller 8y ago
  I think the main benefit is that you can easily reuse these slides for documentation, inside git[hub/lab] or a wiki.
- romwell 8y ago
  >Is Markdown really the best tool for this job? Of course not, we've had Beamer[1] for that purpose for many years :) >I love markdown as much as the next person, but it was designed for writing, not for slides. People said that about LaTeX, and it stopped no one :D On a more serious note, imagine living in a world where your presentations/slides are version-control friendly. Now look around you. You are in that world now. [1]https://www.overleaf.com/learn/latex/Beamer https://www.overleaf.com/learn/latex/Beamer
  - stellalo 8y ago
    Beamer is far from being the right tool for making presentations, and I’ve basically used only that for the last 12 years. LaTeX is for writing long-ish text. If what you are writing doesn’t contain sufficiently long text, then it’s hard to justify the overhead compared to say Markdown-based solutions.
    - ziotom78 8y ago
      I found the pair pandoc+beamer perfect for some kinds of presentations. Recently I used them to prepare the keynote and the proceedings for a conference talk: https://bitbucket.org/Maurizio_Tomasi/adass2018-julia/src/master/ https://bitbucket.org/Maurizio_Tomasi/adass2018-julia/src/ma... (The keynote is in "presentation.md", and the paper in "article.md".) I had to customize a few pandoc's defaults (see the Makefile) and even had to use a Python filter to tweak the output, but the result was excellent: once everything was in place, creating the slides required no effort at all. I was even able to switch the format from 4:3 to 16:9 in a breeze, once I learned what the resolution of the projector was.
shin_lao 8y ago
Does this support code blocks and syntax highlighting?
- ziotom78 8y ago
  Yes, it does, and it also supports LaTeX formulae.
infiniteseeker 8y ago
Interesting timing on this. However, I just got org mode and reveal humming together using org-re-reveal and couldn’t be happier.
rcarmo 8y ago
I like the idea, but keep wondering what people do for illustrations. Diagrams and whatnot are best rendered in SVG if you're going the HTML route, and I haven't yet found a nice way to both draw and present such things other than standard PowerPoint/Keynote.
- inyorgroove 8y ago
  There is mermaid: https://mermaidjs.github.io/ https://mermaidjs.github.io/
drizze 8y ago
I’ve used this tool which provides similar functionality for several presentations and I love it. Especially using git to version control my talk. https://www.deckset.com https://www.deckset.com
- andreiursan 8y ago
  I also used it, and I can say that it's an excellent tool/app.
- guessmyname 8y ago
  Another Deckset.app user here, it is just great!
fouc 8y ago
Wow, I love the look & feel of the preview. I would actually use this not just for slides but general markdown writing. I love how the text starts off in the center of the page.
mcstafford 8y ago
That looks pretty useful. With my terminal focus I suspect I'd go with landslide before an electron app. https://github.com/adamzap/landslide https://github.com/adamzap/landslide
airstrike 8y ago
Want to make an absurd amount of money? Integrate this with Excel to allow the user to include images that are defined as outputs from certain ranges of cells in the spreadsheet. Figure out how to streamline that workflow and every financial services company out there will want to use your product.
- jsilence 8y ago
  Never tried but is it not possible to include Excel "Objects" in Powerpoint and Word that can easily be updated?
  - airstrike 8y ago
    Gets out of hand fast for sufficiently large Excel files or for presentations with lots of slides and data
- ackbar03 8y ago
  There's a lot that can be done in excel already, if someone really needed this I think they'd be able to create it with what's available already
  - airstrike 8y ago
    Not with Markdown. I'm talking RMarkdown meets Excel
    - h4ck3rhn 8y ago
      Mind if I talk to you offline? My contact is my profile. Thx -Kapil
      - airstrike 8y ago
        Of course, I'll add you on LinkedIn
romwell 8y ago
Nice! It's like a scaled-down Beamer[1] for people who don't speak LaTeX :) [1]https://www.overleaf.com/learn/latex/Beamer https://www.overleaf.com/learn/latex/Beamer
- jsilence 8y ago
  I really wish more of these projects would adopt org-mode for its underlying format instead of markdown.
  - fourier_mode 8y ago
    Well, =org-mode= in itself is quite complete when it comes to beamer. The only thing that it lacks is having an IDE which has Emacs editor on the right, with synctex running in the bckground. Tbh, I don't see it that helpful compared to the engineering that needs to be stitched together.
    - jsilence 8y ago
      Just talking about the file format. Programs could implement partial functionality, leavng everything it does not recognize untouched.
Agnosco 8y ago
I'm in the process of trying to automate production of presentation material. Almost all slides contain a single header + chart or a single header + subheaders for multiple charts (think R ggplot charts and faceting). Data is mostly representing descriptives from surveys. Once I have good data pre-processing and charting in R, what is the best way to easily automate much of the creation of presentations? Any experiences?
black-tea 8y ago
I've done many presentations using ox-reveal, an org-mode exporter for reveal.js. Org-mode is far better than markdown, has much tooling for writing it (ie. org-mode and the rest of emacs), and reveal is much cooler than a PDF. But regardless of these choices I think this method of writing plain text with a sprinkling of markup is great for all kinds of documents. Thanks to tools like pandoc I haven't had to touch MS Turd in years, but I can still produce better looking doc files than people who do use it (obviously I prefer pdf but sometimes the battle is not worth fighting).

194 points by pplonski86 8y ago

This is a terrific tool which I've used several times to rapidly assemble presentations. If you're already fluent with markdown, Marp is a very natural fit. I find working in heavy-duty presentation software packages to be like running through glue. Instead of creating content, I get caught up in pixel-pushing to make everything look right. Marp offers a couple of styles. It's very refreshing to use. Best of all, it'll output nice-looking PDFs that you can share afterwards. Recommended. I have no affiliation with Marp or its creator - I'm simply a happy user.

thangalin 8y ago

The Chain-of-Responsibility software development design pattern provides a way to separate a source document (Markdown) from its final presentation format (PDF). On a related note, I've developed an open source editor that can edit Markdown, R Markdown, and XML documents[1][2]. The input document is translated in real-time to HTML. Using the Chain-of-Responsibility pattern[3] makes it straightforward to introduce additional processor chains, which could include slide show output via CSS. On a minor technical note, including HTML tags (such as <small>...</small>) defeats one of the key benefits of Markdown: separation of content from presentation. An alternative is to use named blocks to classify text, such as[4]: ::: footer Copyright 2019 ... ::: [1]: https://github.com/DaveJarvis/scrivenvar https://github.com/DaveJarvis/scrivenvar [2]: https://github.com/DaveJarvis/scrivenvar/blob/master/USAGE.md https://github.com/DaveJarvis/scrivenvar/blob/master/USAGE.m... [3]: https://github.com/DaveJarvis/scrivenvar/tree/master/src/main/java/com/scrivenvar/processors https://github.com/DaveJarvis/scrivenvar/tree/master/src/mai... [4]: https://pandoc.org/MANUAL.html#divs-and-spans https://pandoc.org/MANUAL.html#divs-and-spans

leejoramo 8y ago
For a very long time I have extended Markdown for my writing style. I too use the ::: notation for <div> blocks. I have always used MD as a loose idea which I can change as needed.

andrewflnr 8y ago

> MARP: MARkdown Presentation Writer. Like Powerpoint, but You Only Have To Only have to what? Not the first title I've seen today where someone accidentally a word.

gammateam 8y ago
> but You Only Have To you only have to do all these extra things in a convoluted syntax deep down, you already knew
dewiz 8y ago
I see what you there. The title has been fixed, I noticed that too, and I'm always advocating for removing artificial barriers such as HN limit on titles. When truncating a title HN could for example show the complete one onmouseover or use some JS to expand the title.

nine_k 8y ago

From a brief look at the code I suppose that the app is monolithic. I wish it was split into the processor and "IDE". I'd be able to use my preferred editor instead. I'd be able to run an md -> html -> pdf pipeline in a lightweight, headless build script. Just saying.

gitpitch 8y ago
If you want true separation between processor and "IDE" for your decks check out https://gitpitch.com https://gitpitch.com - modern slide decks for developers on Git. Use your preferred editor - vi, emacs, atom, etc. to create your slide content. The build pipeline is a simple git-push. Your slide deck is then instantly available for sharing online and for download as self-contained bundle or PDF. A dedicated desktop tool is also available that gives you live previews and speaker support offline. You can also export your decks to Microsoft PowerPoint, Apple Keynote, and Google Slides. For a sample GitPitch slide deck see here: https://gitpitch.com/gitpitch/demo-deck https://gitpitch.com/gitpitch/demo-deck
ziotom78 8y ago
Marp Next is supposed to be what you ask (scroll down the page to find more), but it's still in development.
rcthompson 8y ago
> I'd be able to run an md -> html -> pdf pipeline in a lightweight, headless build script. This is how I make my presentation PDFs from Markdown files using pandoc (except I think for me it's md -> latex -> pdf). I use Snakemake[1] to automate it using the following Snakefile: https://gist.github.com/DarwinAwardWinner/5c3fd8fb82757bb04a0a36bda7f2c73f https://gist.github.com/DarwinAwardWinner/5c3fd8fb82757bb04a... The idea is that you write presentation.mkdn, and then run "snakemake", which runs pandoc to produce presentation.pdf. Any images you include should be in a subdirectory called "images". If you have "images/giraffe.svg", you can include "images/giraffe.pdf" in your presentation and it will convert it for you automatically (using Inkscape's CLI), and same for pdf to png using ImageMagick. [1]: https://snakemake.readthedocs.io/en/stable/ https://snakemake.readthedocs.io/en/stable/

acemarke 8y ago

The React community has started to make some tools that use the "MDX" format [0], which combines Markdown and JSX syntax together. The MDX-Deck [1] and Spectacle [2] tools both allow using MDX to create presentations. Last week I wrangled together a repo that adds Spectacle with MDX support to a Create-React-App project, as a reusable starting point [3]. Worked out nicely for a talk I gave this week. [0] https://mdxjs.com/ https://mdxjs.com/ [1] https://github.com/jxnblk/mdx-deck https://github.com/jxnblk/mdx-deck [2] https://github.com/FormidableLabs/spectacle https://github.com/FormidableLabs/spectacle [3] https://github.com/markerikson/cra-spectacle-mdx-boilerplate https://github.com/markerikson/cra-spectacle-mdx-boilerplate

Sytten 8y ago

I think this link https://github.com/marp-team/marp https://github.com/marp-team/marp is more relevant since this was the preview app and the ecosystem is now much more extended.

yaleman 8y ago
Definitely backed up by the tiny text on OP's page: "We have already dropped maintenance." ... so, don't use this one?

gallerdude 8y ago

Is Markdown really the best tool for this job? I love markdown as much as the next person, but it was designed for writing, not for slides. Maybe I'm naive, but it feels designing your own markup language for slideshows would make a lot more sense.

m_mueller 8y ago
I think the main benefit is that you can easily reuse these slides for documentation, inside git[hub/lab] or a wiki.
romwell 8y ago
>Is Markdown really the best tool for this job? Of course not, we've had Beamer[1] for that purpose for many years :) >I love markdown as much as the next person, but it was designed for writing, not for slides. People said that about LaTeX, and it stopped no one :D On a more serious note, imagine living in a world where your presentations/slides are version-control friendly. Now look around you. You are in that world now. [1]https://www.overleaf.com/learn/latex/Beamer https://www.overleaf.com/learn/latex/Beamer
- stellalo 8y ago
  Beamer is far from being the right tool for making presentations, and I’ve basically used only that for the last 12 years. LaTeX is for writing long-ish text. If what you are writing doesn’t contain sufficiently long text, then it’s hard to justify the overhead compared to say Markdown-based solutions.
  - ziotom78 8y ago
    I found the pair pandoc+beamer perfect for some kinds of presentations. Recently I used them to prepare the keynote and the proceedings for a conference talk: https://bitbucket.org/Maurizio_Tomasi/adass2018-julia/src/master/ https://bitbucket.org/Maurizio_Tomasi/adass2018-julia/src/ma... (The keynote is in "presentation.md", and the paper in "article.md".) I had to customize a few pandoc's defaults (see the Makefile) and even had to use a Python filter to tweak the output, but the result was excellent: once everything was in place, creating the slides required no effort at all. I was even able to switch the format from 4:3 to 16:9 in a breeze, once I learned what the resolution of the projector was.

shin_lao 8y ago

Does this support code blocks and syntax highlighting?

ziotom78 8y ago
Yes, it does, and it also supports LaTeX formulae.

infiniteseeker 8y ago

Interesting timing on this. However, I just got org mode and reveal humming together using org-re-reveal and couldn’t be happier.

rcarmo 8y ago

I like the idea, but keep wondering what people do for illustrations. Diagrams and whatnot are best rendered in SVG if you're going the HTML route, and I haven't yet found a nice way to both draw and present such things other than standard PowerPoint/Keynote.

inyorgroove 8y ago
There is mermaid: https://mermaidjs.github.io/ https://mermaidjs.github.io/

drizze 8y ago

I’ve used this tool which provides similar functionality for several presentations and I love it. Especially using git to version control my talk. https://www.deckset.com https://www.deckset.com

andreiursan 8y ago
I also used it, and I can say that it's an excellent tool/app.
guessmyname 8y ago
Another Deckset.app user here, it is just great!

fouc 8y ago

Wow, I love the look & feel of the preview. I would actually use this not just for slides but general markdown writing. I love how the text starts off in the center of the page.

mcstafford 8y ago

That looks pretty useful. With my terminal focus I suspect I'd go with landslide before an electron app. https://github.com/adamzap/landslide https://github.com/adamzap/landslide

airstrike 8y ago

Want to make an absurd amount of money? Integrate this with Excel to allow the user to include images that are defined as outputs from certain ranges of cells in the spreadsheet. Figure out how to streamline that workflow and every financial services company out there will want to use your product.

jsilence 8y ago
Never tried but is it not possible to include Excel "Objects" in Powerpoint and Word that can easily be updated?
- airstrike 8y ago
  Gets out of hand fast for sufficiently large Excel files or for presentations with lots of slides and data
ackbar03 8y ago
There's a lot that can be done in excel already, if someone really needed this I think they'd be able to create it with what's available already
- airstrike 8y ago
  Not with Markdown. I'm talking RMarkdown meets Excel
  - h4ck3rhn 8y ago
    Mind if I talk to you offline? My contact is my profile. Thx -Kapil
    - airstrike 8y ago
      Of course, I'll add you on LinkedIn

romwell 8y ago

Nice! It's like a scaled-down Beamer[1] for people who don't speak LaTeX :) [1]https://www.overleaf.com/learn/latex/Beamer https://www.overleaf.com/learn/latex/Beamer

jsilence 8y ago
I really wish more of these projects would adopt org-mode for its underlying format instead of markdown.
- fourier_mode 8y ago
  Well, =org-mode= in itself is quite complete when it comes to beamer. The only thing that it lacks is having an IDE which has Emacs editor on the right, with synctex running in the bckground. Tbh, I don't see it that helpful compared to the engineering that needs to be stitched together.
  - jsilence 8y ago
    Just talking about the file format. Programs could implement partial functionality, leavng everything it does not recognize untouched.

Agnosco 8y ago

I'm in the process of trying to automate production of presentation material. Almost all slides contain a single header + chart or a single header + subheaders for multiple charts (think R ggplot charts and faceting). Data is mostly representing descriptives from surveys. Once I have good data pre-processing and charting in R, what is the best way to easily automate much of the creation of presentations? Any experiences?

black-tea 8y ago

I've done many presentations using ox-reveal, an org-mode exporter for reveal.js. Org-mode is far better than markdown, has much tooling for writing it (ie. org-mode and the rest of emacs), and reveal is much cooler than a PDF. But regardless of these choices I think this method of writing plain text with a sprinkling of markup is great for all kinds of documents. Thanks to tools like pandoc I haven't had to touch MS Turd in years, but I can still produce better looking doc files than people who do use it (obviously I prefer pdf but sometimes the battle is not worth fighting).