Over a million developers have joined DZone.
Platinum Partner

Markdown + JavaScript = Great HTML Presentation Decks

For awesome HTML presentation decks, try using JavaScript and Markdown.

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

You can easily create beatiful, interactive, simple presentations by writing them in Markdown (falling back to HTML whenever needed) with special markers separating the individual slides and using JavaScript to render it into an interactive HTML presentation. We will now look at a few tools that can help you with that. My favorite one is Reveal.js that has recently got out-ot-the-box support for full Markdown presentations.

Presentation Frameworks


  • Reveal.js at GitHub, live demo introducing many of its features
  • Popular, beautiful, many capabilities
  • PDF export, speaker notes (show on demand or on another device via node.js)
  • The presentation is in HTML but individual slides may contain Markdown (this will result in a number of vertical and/or horizontal slides/sections):
    <section data-markdown>
        <script type="text/template">
            Markdown body of a slide here ...
  • Moreover, the whole presentation may be loaded from a Markdown file:
    <section data-markdown="/my_presentation.md" data-separator="^\n---\n" data-vertical="^\n\n">
         Markdown body of a slide here ...
    • Beware: Both the index.html and the presentation .md file must be served by the same HTTP server due to security limitations; a simple one likely available on your machine is python -m SimpleHTTPServer
    • The two other attributes are optional. --- sourrounded by blank lines is the default separator for horizontal slides (none for vertical ones).
  • Code syntax higlighting via highlight.js
  • Overview mode (overview over all the slides)
  • You can also create and share Reveal.js presentation online via rvl.io


  • deck.js: “A JavaScript library for building modern HTML presentations”
  • Markdown supported within slides with the deck.js-markdown extension
  • Similarly to Reveal.js, the presentation is still HTML with <section>...</section> but the slides content may be Markdown


  • MarkdownPresenter at GitHub
  • minimalistic, little older
  • uses showdown.js to transform a standard Markdown document into HTML
  • slides separated by ! surrounded by empty lines
  • move around with <-, -> and reload it (staying on the same slide) with a space (useful during writing)


  • Contary to the other, JS-based frameworks, this tool is written in Ruby and the presentation HTML must be generated from Markdown offline
  • Generate syntax-highlighted slides from Markdown
  • Slidedown presentation of slidedown
  • slidedown at GitHub
  • the whole presentation is in Markdown, slides separated by !SLIDE
  • syntax highlighting (put your code between @@@ ruby and @@@)
  • last commit Feb 2012


Showdown.js: Markdown to HTML via JS


  • PageDown is the JavaScript Markdown previewer used at Stack Overflow – renders Markdown into HTML
  • usable on client or server side (with node.js)
  • based on a fork of showdown.js
  • no support for presentation but it could easily be extended via its hooks

Highlight.js: Automatic source code highlighting

  • Home page
  • “it works automatically: finds blocks of code, detects a language, highlights it”
  • 2/2013: 54 languages, bundled with 26 style themes

Other Resources

The Web Dev Zone is brought to you in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.

css,html5,javascript,web dev

Published at DZone with permission of Jakub Holý , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}