Sketch out the source form

The presentation source will be a Markdown document embedded in a
minimal HTML skeleton. Slides will be separated with horizontal rules.
All other required code (scripts and styles) will be in separate files.
Add `marked.js`

We will use the `marked.js` library to translate Markdown into HTML.
Load the `marked.js` library

We want to be able to just load one external file from our HTML
skeleton and have it do all the rest. Let’s have it load the `marked.js`
library.

There is a slight problem: If we use relative paths in Javascript, they
are relative to the HTML page. However, we’d like to eventually host the
whole engine on the Web so presentations could just include it and have
it pull all its dependencies.

To that end, we will require that the `<script>` element that loads us
is marked with a distinctive `id` attribute. Then we find it, take its
path and refer to the library relative to that.
Process and render the Markdown content

First, we translate markdown content to HTML, wrap it in an `article`
element, and add it to our DOM instead of the source.
Split into slides by `hr` elements

1. Create a slide container `div`.
2. Enumerate all top-level nodes in the rendered markdown subtree.
  * If it’s a horizontal rule, replace it with the current slide
    container, create a new slide container, and proceed to the next
    node.
  * Otherwise, move the node into the current slide container and
    proceed to the next node.
3. When no more nodes are left, add the current slide container to the
   tree.
Add stylesheet

Make each slide occupy the whole window. All slides are hidden by
default, only the target slide (the one whose ID is in the URL after the
hash) is displayed normally.
Start with first slide by default

Since we only display the slide that is the target of the URL hash part,
there had better *be* a hash part. If there’s none, start with `#s1`.

Additionally, even if there is a hash part and I reload the page in
Firefox, it does not become the target initially. So force it.
Navigate slides by keys

There are two events that interest us; roughly, `keypress` for those
that depend on the keyboard layout and `keydown` for those that don’t.

We store the key bindings as maps from the key code to the handler
function. If there is a handler for a particular key combination, we
call it.
Set font size

None of the usual font size units are good for presentations. A
comprehensive [research][1] on the matter involves taking into account
the screen size (when actually projected), the room depth (eye distance
of the farthest viewer), angular seconds and the visual acuity of
viewers.

[1]: http://www.thinkoutsidetheslide.com/selecting-the-correct-font-size/

We just base everything on a base size of 24pt on a 1024×768 96ppi
monitor, and scale that into `vh`s.
Body text rhythm

We have a line height of 1.5. To completely preserve line rhythm, we
could:

* separate paragraphs with a margin of 1.5em; *or*
* indent the first line of each paragraph and do away with the margin.

Neither is satisfactory for presentations — 1.5em is too wide and
indenting plays poorly with lists.

So we choose to use a margin of 0.75em. This way, the rhythm breaks on
odd paragraphs, and is restored on even ones.
List margins

The same margin of 0.75em should be applied to top-level lists, so that
they render consistently with paragraphs.
Heading 4

Heading level 4 will be just the same size as a regular paragraph, and
so has the same line height and margin.
Heading 3

A third level heading will be 1.5em relative to body text. It is big
enough to lose the boldness. To preserve rhythm, set line height to 1.
Margin is calculated against the increased size so reduce it to
0.5em (0.5×1.5 = 0.75).
Heading 2

A second level heading is twice as big as body text. In the line rhythm,
a single line of heading 2 stands for two lines of body. The margin is
set so that it multiplies to the normal 0.75 = 2 × 0.375.
Heading 1

First level heading is thrice as big as body text. Its line height is
set to 1 so that it uses the same double rhythm as h2. The margin is set
to multiply to 0.75 again.
Heading 5

Fifth and sixth level headings should not be used in presentations. But
just for completeness, fifth level will be 25% smaller than body text
and emphasized with bold. It will fit into the usual body text line by
setting the line height at 2 and margin to 1em.
Heading 6

Sixth level headings are similarly not recommended, but added for
completeness.
List padding

With a larger font, the default padding on lists is too small, causing
numbered list markers to overflow into the left margin.
Add test slides for paragraph lists

If you separate list items in markdown with empty lines, the markdown
engine makes each item a paragraphs. This makes it possible to have
multiple paragraphs in a list item.
Add background support

If the first element of the slide is an image, make it the background
for the slide and scale to the maximum.