[Francisco Souza] Creating HTML 5 slide presentations using landslide

Recently I found landslide, which is a Python tool for creating HTML 5 slide presentations.

It’s based in a famous slide presentation. It’s a simple script that generates HTML from a source file, which can be formatted using reStructuredText, Textile or Markdown.

Let’s make a very simple presentation as a proof of concept: we’re going to create a “Python flow control” presentation, showing some basic structures of the language: if, for and while. We need a cover, a slide for each structure (with some topics and code examples) and the last slide for questions and answers. Here is the RST code for it:




* Please don't use ()* Never forget the ``:`` at the end of the line

Check this code:

.. sourcecode:: python

    x, y = 1, 2    if x > y:        print 'x is greater'



* ``for`` iterates over a sequence* Never forget the ``:`` at the end of the line

Check this code:

.. sourcecode:: python

    numbers = [1, 2, 3, 4, 5,]    for number in numbers:        print number



* ``while`` is like ``if``, but executes while the codition is ``True``* please don't use ()* never forget the ``:`` at the end of the line

Check this code:

.. sourcecode:: python

    from random import randint

    args = (1, 10,)    x = randint(*args)    while x != 6:        x = randint(*args)


Thank you!==========

As you can see it’s very simple. If you’re familiar with RST syntax, you can guess what landslide does: it converts the entire content to HTML and then split it by <hr /> tag. Each slide will contain two sections: a header and a body. The header contains only an <h1></h1> element and the body contains everything.

We can generate the HTML output by calling the landslide command in the terminal:

% landslide python.rst

To use landslide command, you need to install it. I suggest you do this via pip:

% [sudo] pip install landslide

landslide supports theming, so you can customize it by creating your own theme. Your theme should contain two CSS files: screen.css (for the HTML version of slides) and print.css (for the PDF version of the slides). You might also customize the HTML (base.html) and JS files (slides.js), but you have to customize the CSS files in your theme. You specify the theme using the --theme directive. You might want to check all options available in the command line utility using --help:

% landslide --help

It’s quite easy to extend landslide changing its theme or adding new macros. Check the official repository at Github. This example, and a markdown version for the same example are available in a repository in my github profile.

You can also see the slides live!