Marp: Markdown Presentation Writer | Hacker News Reader

Marp: Markdown Presentation Writer

yhatt.github.io

484 pointssomecoder95 comments

Shameless plug: I'm a lecturer and have scratched this itch some time ago with a pet project that a couple lecturers are using now: https://github.com/munen/p_slides/

It doesn't ship it's own editor, because everyone already has a favorite(for me that's formerly vim, now Emacs). It's only static files, so it doesn't need a server or pre-compilation. It's extensible, has syntax highlighting and produces PDFs for the students. Also, it's only a mash up of great existing libraries, so it needs no maintainance and further development. One of the few pieces of software that I wrote which are feature complete^^

A couple friends(also lecturers) and I have been using it for about five years now.

Great work!

Are you aware of markdeep?

https://casual-effects.com/markdeep/

...support for it might be a nice addition to this project.

Thanks a bunch^^

Markdeep looks totally awesome - I'm going to give it a try, soon! Now is midnight, though, and my fiance wants me to quit the computer^^

Thanks again, I'm looking forward to be able to include diagrams and have them under version control!

Github clone and unminified version. https://github.com/reelsense/markdeep

How is it compared to reveal.js?

http://lab.hakim.se/reveal-js/

* Out of the box reveal-js does not support Markdown Slides. Yes, of course they do, but you'll have to write HTML per slide and then embed Markdown. p_slides is Markdown online.

* reveal-js is _much_ bigger whereas p_slides relies on well tested and established software. For example many features that you can find on the reveal-js README are also included in p_slides, because it uses W3Org slidy-js[1]. p_slides actually is only very little code itself as it glues together very well established and good existing libraries. reveal-js does a lot by itself. Both options are valid, yet they are different(;

1. https://www.w3.org/Talks/Tools/Slidy2/#(1)

You can also you Slide Show (S9) to generate Reveal.js slides from your markdown source. See https://github.com/slideshow-templates/slideshow-reveal.js as an example. The templates are Jekyll-compatible (and, thus, work "out-of-the-box" on GitHub Pages (no plugin required). See http://slideshow-templates.github.io/slideshow-reveal.js/sli... as a live demo. Cheers.

Thanks for that hint! p_slides is explicitly dumb, though. It has no requirements to install additional software, pre-compile anything or run a server. This way it just works for many lecturers on different Operating Systems with very different areas of expertise and continues to do so without any changes after 5 years. Hosting on GH Pages is totally awesome for us developers, however my primary use case is to have the slides self-contained (no dependencies) in a private repository with other lecturers for using them in the university.

Hello, FYI: The output of Slide Show (S9) is a self-contained static site (works anywhere incl. of course private repos etc.) - you can also create a single-file PDF as an option. Only the templates "require" GitHub Pages or Jekyll if you want a "live" preview for demos. Cheers. PS: More info @ http://slideshow-s9.github.io

Hi Gerald

S9 really looks nice - however, it is not self contained in the sense that I was referring to. p_slides is essentially a single HTML file (with the other assets hosted somewhere).

For S9, Ruby and usage of the command line is required. For a developer, that's not a big issue, of course. Myself, I'm a Ruby/JS/Clojure dev, so I do not mind installing one more gem(; However, my goal was to _really_ make p_slides self-contained. There is no need to install anything, run any pre-compiler or run the slide within a web-server. It doesn't even use npm or bower to install the assets. With this methodology, p_slides certainly is technologically less complex (or interesting^^), but it continues to work after years without any change on any computer that has a browser. That's just not happening with Ruby or Node or any other dependency. I'm not saying the latter is bad (it is not at all!), I'm saying this simplicity ability to be completely self-contained with no tooling required was the specific design decision for p_slides and it served me and a couple lecturers well. I basically made no advertisement for it, I just wrote it, because I wanted something that just works and I can distribute to students, too.

For that gap I wrote a GitHub pages compatible Jekyll wrapper: https://github.com/tasmo/reveal-jekyll

There is also http://strut.io/

Looks interesting, but is a completely different thing - it's a SaaS solution whereas p_slides is static files that you can put into version control and work collaboratively with your peers. For me, that's a godsend regarding the alternative workflows and other tools. My peer lecturers value it a lot, too. But of course, we are all CS lecturers^^ For other people a hosted solution might be a really interesting choice!

a) looks cool b) i would be much more interested if the "example presentation" actually showed me a presentation, not some raw html. maybe use GitHub Pages to through up an example?

a) Thx^^

b) Very good point. I just made it so that you can now click on the example and see it unfold in your browser without having to clone the repo. Thank you for the feedback!

This fails (my) personal test of all HTML systems -- it doesn't scale well with changes in resolution, and many projectors will auto-change my laptop's size when I plug them in.

My hacked up slide system (which I want to dump, I hacked someone else's library years ago) makes a fixed div of size 1024x768, and then uses CSS zoom to resize that to the browser window.

Could you elaborate? How does it not scale? It's using bootstrap for styling, so there's that. Me and a couple of lecturer peers have been using it in lectures for classes of all sizes which includes different kinds of beamers. As you stated, my machine will also auto-scale resolution in this scenario. If all else fails, there's Strl++/- (;

I'm also using it on OS X and Debian. Both work well. And as is recognizable from the git commit history - there's not much that needs to be done over the years to keep it going. Exactly my kind of HTML system - dead simple, no dependencies, works also years later^^

Well I could ctrl +/-, but then have to worry some slide mid-presentation will still be too large and have to shrink again.

With PowerPoint / keynote and friends, I can be sure all my text will fit on the screen, even if I end up on a stupid 800x600 projector. No HTML framework, except my hacky mess, seems to do that. Maybe resizing mid presentation bothers other people less than me.

Ok, I do understand now. In my career, I have not met a 800x600 projector - but the problem scales (pun intended^^), of course.

Would you be willing to share your hacky mess or make a PR? I really do get what you're referring to now and do think that if you won't contribute, I'll have to write my own hacky mess(;

Older projectors have this resolution, but 1024x768 is more common. Some of the projectors at my university are 800x600 and I've run into them at conferences where the hotel conference facilities are older and haven't kept up.

If we're plugging, I'm very partial to Hovercraft, which throws a wrapper around impress.js, and provides a proper presenter's console as part of the rendered HTML/JS: https://github.com/regebro/hovercraft

Looks interesting, on a first try the demo presentation didn't work on my iPhone 6s - and you need to install additional software. p_slides is explicitly dead simple.

hovercraft looks nice, though - I'll probably check it out later on a bigger machine, again. Thanks for sharing!

I like the way our tools went from Text -> Graphical interface -> Text

You can see this with all the CLI tools being introduced for traditional programs. I suppose people appreciate control and automation.

Reminds me of Neal Stephenson’s great essay, ”In the Beginning Was the Command Line”.

http://cristal.inria.fr/~weis/info/commandline.html

I've made an .epub of this, because I don't have time to read it yet.

If someone else wants to read that more comfortably later tonight: https://www.dropbox.com/s/143tu70gxc40qvi/In.The.Beginning.W...

_(no guarantee on the conversion quality)_

IBWCL is REQUIRED reading for anybody intending to study compsci or work with computers in any capacity. It's dated, but it explains the principles of open source, UI, and abstraction clearly and simply. These are all things that you Need to Know.

Text is, kind of, the only truly portable, multi-platform control/interface/thingy/

you like that? I can see how you might like a command line as opposed to a dumbed-down, simplistic, and intelligence-insulting GUI.

But I cannot see how you can love Markdown. A shit standard that uglifies everything it touches, instead of celebrating the beauty of typography.

There is no inconsistency between liking command line, and being demanding in terms of text layout. Just ask LaTeX.

What does markdown have to do with text layout? It basically acts like a lightweight, readable version of html. If you don't like how it renders, render it some other way.

Well, I like that the format is readable and just plain text files.

If you wrote documents in word 1.0 or WordPerfect or something, they may be lost to the world but markup could still be read by any reader.

Much as I love LaTeX, it's a programming language and not a markup format like Markdown. LaTeX is kind of a terrible exchange format for that reason.

Sometimes people want a dumbed down command line to get the best of both.

For someone who is on windows, this is a godsend. The Mac guys all have Deckset[0] which is amazing. Was searching for something like this to make quick slides. Thanks much :)

[0]: http://www.decksetapp.com/

I have used deckset for all of my presentations[1]. It's fantastic, and forces you to follow Zach Holman's rules[2] about slide typography, which is basically "you can't go too big."

[1]: https://speakerdeck.com/gammons [2]: http://speaking.io/design/typography/

The presentations look wonderful. Zach has constantly been my inspiration to make better slides. Almost ALL my slides[0] incorporate some of his teachings :)

[0]: http://speakerdeck.com/shrayasr

I recently discovered Deckset and I must say I was very happy with it (for markdown editing + PDF export, with code highlighting).

Example of use: https://speakerdeck.com/thbar/de-rails-a-phoenix-retour-dexp...

This looks amazing. Is it a custom theme, perhaps?

Thanks! It's a built-in theme which I chose carefully :-) (and actually & afaik, there is no custom theme support at the moment in that app).

Wow, Deckset looks awesome. I've never looked for something like this, but thanks for mentioning.

You're welcome. The road from here only goes up! Have fun, mac guy :)

Might I suggest also having a look at https://github.com/gnab/remark

It's uses markdown as well, has a presenter mode, speaker notes, and is easily customizable. The best thing is that everything can neatly fit in an HTML file or you can create a folder with the JS for offline usage.

Demo: http://remarkjs.com/

It could be even simpler. A presentation tool by the suckless folks with minimal dependencies but several features:

http://tools.suckless.org/sent/

I like pinpoint[0] which is the same vein. Here is a presentation [1].

[0] https://wiki.gnome.org/Apps/Pinpoint [1] https://www.youtube.com/watch?v=po5La1OP2WI

Also, there is http://trikita.co/slide for Android and a standalone https://github.com/trikita/slide-html with very similar goals

If rampant NIH syndrome is your thing, that might be great. But if rampant NIH syndrome is your thing, you'll write your own anyway, so...

I disagree VEHEMENTLY. Sent is a godsend if you want to write a simple presentation without the bullshit. And if you use sent, the constraints placed on you force you towards making good slides.

Disagree all you like. The same is true of org-mode with reveal, or Marp, or any of myriad other tools. There's no magic to suckless software. It's just a lot more opinionated than most, a trait which plainly suits you well.

Now see, that I agree with. I merely disagree that sent's useless unless you have a taste for NIH.

Who called it useless? But ascribing rampant NIH to suckless is hardly a strain on credulity; otherwise they'd just use FreeBSD, instead of reinventing it piecemeal on the Linux kernel.

You did describe it in a way that implied it was useless if NIH wasn't your thing.

And no, I don't argue that NIH doesn't exist in other suckless projects, merely that it isn't the rationale for sent. Sent has some solid advantages over anything else out there, at least for me.

I don't agree that the implication you ascribe is present, or that sent isn't primarily motivated by NIH in the same way that more or less all of the suckless repertoire appears to be, but reasonable people can differ on such points without acrimony. In any case, I'm glad you found something that suits you.

Well, then. I'm sorry for reading that implication in, and glad that we could come to understand each other better.

HN is a lot like Youtube comments: There's a lot of arguing, but sometimes, people treat each other decently. It's honestly kinda surreal, coming from 4chan, reddit, or tumblr.

While marp looks great, reveal.js[1] includes markdown support and has a huge ecosystem.

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

Clarification: reveal.js supports markdown for individual slides. This project (Marp) allows you to write your whole presentation in a single markdown document.

(Using just "---" to separate slides instead of repeating: <section data-markdown> <script type="text/template"> slide markdown goes here </script> </section>

...seems like a productivity win IMO)

You can just use Pandoc to output reveal.js HTML for you.

    pandoc hello.md -t revealjs -o hello.html

Neat! Combine this with http://entrproject.org/ and https://github.com/cortesi/devd/releases for live-regenerating+reloading html output on md input changes :) . Or incrond, but entr feels great for this kind of ad-hoc workflow.

Oh that's very cool. What's the slide separator?

This might help:

http://pages.stat.wisc.edu/~yandell/statgen/ucla/Help/Produc...

Looks like either top level headings (equivalent to sections I guess) or a line like this "----------" would work.

Reveal also supports this on external markdown files: https://github.com/hakimel/reveal.js/#external-markdown

My personal example: http://slides.mkii.org/#/1

We use this in generator-reveal[1]. One markdown file per slide and minimal configuration in a json file. I have no shame

[1]: https://github.com/slara/generator-reveal

Great work. Love the live preview. As (another) alternative (with a 5+ year history) may I suggest Slide Show (S9). S9 lets you use your slide show package of choice when preparing the output from your markdown source. So far packages include: Shower [1], Reveal.js [2], S5 [3], S6 [4], Deck.js [5], Impress.js [6] and some more. Note: All templates / packages are Jekyll/GitHub Pages-compatible/ready. Cheers. [1] https://github.com/slideshow-templates/slideshow-shower [2] https://github.com/slideshow-templates/slideshow-reveal.js ... [5] https://github.com/slideshow-templates/slideshow-deck.js [6] https://github.com/slideshow-templates/slideshow-impress.js

This is fantastic!

I've been working for a bit on a project for converting mind maps into slides. One feature I really liked was changing the level of depth of items.

Let me try to explain what I mean. Say you're brainstorming and create a tree/toc of your slides. Then you start filling in the items for each slide. While you're doing so, you realize that slideA requires more details, so you turn the slide into a section and it's items into slides. Similarly, another section with multiple slides becomes less important, so you turn that section into a slide slideB and its slides into items of slideB.

The reason I like mind maps/trees is that these operations can be easily done by changing the level of depth of the items, e.g. via drag & drop.

I really like this idea of a simple markup for creating slides (plus the fact that it's text, so easy to version), and if this feature of making easy to change the level of depth of items could be integrated I think this would be a super plus!

I make a lot of presentations, many of which include plot.ly plots. slides.com made it easy to embed iframes, and they are sized nicely on every device I've tried.

I used to think text was the future for making slides, but then I realized I cared too much about exactly how my slide looked, and a WYSIWYG saves a ton of time if you want that level of control.

I create and deliver a lot of presentations. What I notice: I often use PPT "slide sorter" to reorganize slides. My presentations are usually hundreds of slides, and I can't imagine hunting through markup for my frequent (daily) reorganizing. I also use the Training standard of about 50% to 60% graphics - and I tend to revise and revise graphics as I work on the course. Having integrated graphics is both very fast and very easy - with easy access to other slides for cut/paste (and an integrated library of symbols I create and reuse.)

I'm not complaining about this project...I'm just commenting about why no "production" course developers would consider switching to something like this. Just an FYI.

Another shameless plug: I use this. Thanks pandoc.

https://github.com/yogsototh/mkdocs

It generates presentations from markdown with reveal.js and beamer. It also generates documents both HTML and PDF.

Always love to see web based presentation tools.

I've been using Bespoke.js [1]. Minimal core, and drop in plugins as needed. I also made a skeleton for quickly making new decks [2].

[1]: http://markdalgleish.com/projects/bespoke.js/

[2]: https://github.com/makenew/deck-bespoke.js

How does one actually... well, display the presentation? (without the markdown on the side)

Under "Features", one of the bullet points are "* Export slides as PDF!".

I don't know if that's the only option or if there are more than that.

Plus one on this. Switching to full screen (on a mac) should just go into "presentation" mode and show only the slide.

Don't have Github account so I can't place an issue there, but PDF export appears to fail with source-code listings in the Gaia theme.

Otherwise, this application is simple and to the point for making quick slide sets. I wonder if someone will invest the time to make a Go-lang style slide theme.

Another project is OdpDown. It converts Markdown to Opendocument Format presentations in contrast to the PDF that is created by Marp.

I like the approach of creating a single static file (i.e. no JavaScript).

An advantage of creating ODP files is that the whole reusable presentation is one file. PDF is not as friendly for reuse. The presentation author that uses Marp could publish a git repo or a zip file with the source files.

A big advantage of HTML and PDF is that they render directly in the browser. ODF support in browser is a still a dream for the future.

The author of odpdown is a contributor to LibreOffice.

https://github.com/thorstenb/odpdown

I've consistently used PDF for my slides simply because it's portable. Most of the places I've presented all have had a dedicated computer connected to the projector along with a second cable for laptops. If for some reason I can't connect my laptop to a projector I can use my backup copy on a USB drive and plug that in to the computer connected to the projector.

Markdown is fine for github, but isn't there even a slight bit of Helvetica-fatigue out there? Aren't we in a position, 20 years after HTML's widespread adoption, where we can aspire to something slightly more artful/communicative than Markdown's catastrophically simplistic and tragically ugly idea of layout?

Markdown represents, honestly, the massacre of the art of typography. It is ironic how such an ugly standard clashes with the its inventor's purported love for Apple, a company whose very DNA is about the beauty of layout, fonts, and the visual representation of the written word.

Markdown -> you have been weighed in the balance and found (severely) wanting.

Markdown has nothing to do with typography. What the output looks like is, deliberately, a completely separate concern.

In the case of using markdown for generating web based presentations, your CSS would be responsible for the styling - just like any other web page.

Markdown is just the semantics and content.

Very cool! I'm trying to write my own markdown-to-reveal (to know revealjs supports Markdown, but it's a bit of a hack and doesn't fit my workflow or lecturing needs).

If I have one critique from growing the docs: I find myself giving presentations on the fly. I hack around on Google Slides until the last minute and throw up a link so that I can share with the rest of the world, but also so that I can use any Internet connected computer to present. With revealjs, I get both local and easy-to-S3 access. I may have missed it but can Marp slides be ported so that other computers can run the presentation without installing the app?

For people looking for an alternative, cli centered approach, check out reveal-md.

https://github.com/webpro/reveal-md

Very nice. I wrote a very similar authoring / presentation tool based on MD. It's being used as the presentation app for Axway's instructor-led training and Open Badge authoring. : https://twitter.com/tzmartin/status/687011251172458496

Slide authoring supports nearly all of Deckset syntax (plus a few more tokens), slide configuration and custom themes.

Hey that's pretty cool. Is this available anywhere for trying?

While we're plugging, prefer sent (http://tools.suckless.org/sent/). It's dead simple, and its limitations push you towards making better presentations.

For those who want something notably more minimal there's the lovely mdp: https://github.com/visit1985/mdp

It would be perfect if it would support MathJax markdown syntax

Do anybody simplify LaTeX for these kind of jobs? Sometimes I think they have much in common, except that LaTeX is much more complicated.

I typically have used either Beamer (what I currently use) or Prosper (what I used to use) document classes in LaTeX for my slides and have since probably the 90s. For me, the big thing with using LaTeX is that I can get consistent fonts between the equations on my slides and the symbols in my figures since I draw my figures using LaTeX in some way (usually TikZ or Sketch[0]). Plus, I can have my figures under source control in a manner that supports simple diffs.

[0] http://sketch4latex.sourceforge.net/

Note that Sourceforge was down when I checked, but this should be the right URL.

Org-mode with Beamer export. It's a pretty efficient combo. Downside is learning emacs. On the other hand, an upside is learning emacs ;-)

I'm more of a minimalist when it comes to slides, so most systems are overkill for me. This lowers the barrier to even bother, haha.

This is great. LaTeX beamer or Google Drive has been my choice so far. I will give this one a try.

Markdown has really added simplicity for creating great content easily and fast..

to be fair this specific thing isn't very new, e.g. rabbit[0] allowed making slides with a simple text format ten years ago

[0] http://rabbit-shocker.org/

This looks great! I'm particularly thrilled about the export-to-PDF option.

Man, really sneaky with the extra t. I thought this was put out by the analytics shop YHat, the guys that built Rodeo and a couple other tools.

Really sneaky using one's proper name as a username?

(yhatt) Yuki Hattori https://github.com/yhatt

please do a favor:

- rename tarballs to Marp-0.0.8...tar.gz

- put the code inside a main directory

This is great work. A lot of hate in this thread. But this app is free, open source with a MIT license, and super easy to use and nice looking.

I don't think there's a single negative comment in this thread.

While this does look really cool, it should be noted that Deckset is a really good paid app that's been doing this for a while on the mac, and it looks like you'll get much nicer looking results with Deckset.

http://www.decksetapp.com/

Reply on news.ycombinator.com