DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. Markdown + JavaScript = Great HTML Presentation Decks

Markdown + JavaScript = Great HTML Presentation Decks

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

Jakub Holý user avatar by
Jakub Holý
·
Mar. 26, 13 · Analysis
Like (0)
Save
Tweet
Share
32.80K Views

Join the DZone community and get the full member experience.

Join For Free

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

  • 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 ...
        </script>
    </section>
  • 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 ...
    </section>
    • 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

  • 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

  • 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)

Slidedown

  • 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

Tools

Showdown.js: Markdown to HTML via JS

  • Showdown at GitHub
  • Try Showdown online
  • supports custom extensions (regexp replace, filter callback)

PageDown

  • 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

  • Roundup of HTML-Based Slide Deck Toolkits – Fathom.js, impress.js, 5lide, Slidedown, deck.js, html5slides (Google HTML5 slide template) and a number of others
HTML JavaScript library

Published at DZone with permission of Jakub Holý, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Top 5 Node.js REST API Frameworks
  • The 31 Flavors of Data Lineage and Why Vanilla Doesn’t Cut It
  • Best Practices for Writing Clean and Maintainable Code
  • How To Validate Three Common Document Types in Python

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: