Demo presentation in Madoko

In both HTML and PDF

Daan Leijen
Microsoft Research


Madoko Presentation

Using Madoko it is easy to create beautiful presentations.

  • Html: Uses the Reveal.js library by Hakim El Hattab.
    This slide demo in Madoko is an adaption of his online demo.
  • Pdf: Uses the Beamer package for LaTeX
  • Source: Click to see the source of this presentation.


reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

And any Madoko features just work. Here is some math:

A famous equation is $e = mc^2$, but this one is famous too:

\[\int_{-\infty}^\infty e^{-a x^2} d x = \sqrt{\frac{\pi}{a}} 


Here is code, highlighted by Madoko

function sqr( x ) {
  var π = 3.141593;
  return x*x;  /* the square */

We used \( and \) to escape into markdown to write π.

Vertical Slides

Slides can be nested inside of other slides, try pressing down.


Basement Level 1

Press down or up to navigate.

Basement Level 2

Use columns to put blocks next to each other:

A monarch butterfly (shown to the right) spends the winter in Mexico.



Basement Level 3

That's it, time to go back up.



Reveal.js comes with a few themes built in:

Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.


You can select from different transitions, like:
Cube - Page - Concave - Zoom - Linear - Fade - None - Default


Some pauses.

  • One
  • Two
  • Three

And more:

  • Test 1
  • Test 2
  • Test 3


A slide with no header

Point of View

In Reveal.js Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using  zoom.js. Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.


You can print a revealjs presentation nicely from the browser.

First give the ?print-pdf or ?print-paper query on your final presentation (in the browser address bar) and then print from the Chrome browser selecting Save to PDF.

Read more about it at the revealjs documentation

RevealJS library

Normally, the revealjs library is loaded from a CDN but you can specify your own url using metadata:

Reveal Url: <my url>

This can be useful when using a server to run revealjs where you may use something like:

@nopreview Reveal Url: http://localhost:8000/reveal.js

Thanks for looking :-)