HTML5/CSS slides


Epicslide is a landslide fork. It generates a slideshow using the slides that power the html5-slides presentation.



python (python2) and the following modules:

  • jinja2
  • pygments for code blocks syntax coloration
  • markdown if you use Markdown syntax for your slide contents
  • docutils if you use ReStructuredText syntax for your slide contents
  • weastprint if you want to export your presentation to PDF files


  • textile for textile support


$ python setup.py install

Running tests

You should first install pytest and some pytest plugins:

$ pip install -r tests/requirements.txt

You can run the tests without any pytest plugins: $ python -m pytest tests

You may want to have the test coverage: $ python -m pytest –cov src/epicslide tests $ python -m coverage html -d tests/report $ firefox tests/report/index.html

You may want to have pep8 checking: $ python -m pytest –pep8 tests

And now, you can combine the cov and pep8 plugins: $ python -m pytest –cov src/epicslide –pep8 tests $ python -m coverage html -d tests/report



  • Your Markdown source files must be suffixed by .md, .markdn, .mdown or .markdown
  • To create a title slide, render a single h1 element (eg. # My Title)
  • Separate your slides with a horizontal rule (--- in markdown) except at the end of md files
  • Your other slides should have a heading that renders to an h1 element
  • To highlight blocks of code, put !{lang} where {lang} is the pygment supported language identifier as the first indented line


  • Your ReST source files must be suffixed by .rst or .rest (.txt is not supported)
  • Use headings for slide titles
  • Separate your slides using an horizontal rule (---- in RST) except at the end of RST files


  • Textile cannot generate
    , so you must insert those manually to separate slides


  • Run epicslide slides.md or epicslide slides.rst
  • Enjoy your newly generated presentation.html

Or get it as a PDF document:

$ epicslide README.md -d readme.pdf
$ open readme.pdf


  • Press h to toggle display of help
  • Press left arrow and right arrow to navigate
  • Press t to toggle a table of contents for your presentation. Slide titles are links
  • Press ESC to display the presentation overview (Exposé)
  • Press n to toggle slide number visibility
  • Press b to toggle screen blanking
  • Press c to toggle current slide context (previous and next slides)
  • Press e to make slides filling the whole available space within the document body
  • Press S to toggle display of link to the source file for each slide
  • Press ‘2’ to toggle notes in your slides (specify with the .notes macro)
  • Press ‘3’ to toggle pseudo-3D display (experimental)
  • Browser zooming is supported

Commandline Options

Several options are available using the command line:

-h, --help            show this help message and exit
-c, --copy-theme      Copy theme directory into current presentation source
-b, --debug           Will display any exception trace to stdin
-d FILE, --destination=FILE
                      The path to the to the destination file: .html or .pdf
                      extensions allowed (default: presentation.html)
-e ENCODING, --encoding=ENCODING
                      The encoding of your files (defaults to utf8)
-i, --embed           Embed stylesheet and javascript contents,
                      base64-encoded images in presentation to make a
                      standalone document
-l LINENOS, --linenos=LINENOS
                      How to output linenos in source code. Three options
                      availables: no (no line numbers); inline (inside <pre>
                      tag); table (lines numbers in another cell, copy-paste
-o, --direct-output    Prints the generated HTML code to stdin; won't work
                      with PDF export
-q, --quiet           Won't write anything to stdin (silent mode)
-r, --relative        Make your presentation asset links relative to current
                      pwd; This may be useful if you intend to publish your
                      html presentation online.
-t THEME, --theme=THEME
                      A theme name, or path to a landlside theme directory
-v, --verbose         Write informational messages to stdin (enabled by
                      Comma-separated list of extensions for Markdown

Presentation Configuration

Epicslide allows to configure your presentation using a cfg configuration file, therefore easing the aggregation of source directories and the reuse of them across presentations. Epicslide configuration files use the cfg syntax. If you know ini files, you get the picture. Below is a sample configuration file:

theme  = /path/to/my/beautiful/theme
source = 0_my_first_slides.md
destination = myWonderfulPresentation.html
css =    my_first_stylesheet.css
js =     jquery.js
relative = True
linenos = inline

Don’t forget to declare the [epicslide] section. All configuration files must end in the .cfg extension.

To generate the presentation as configured, just run:

$ cd /path/to/my/presentation/sources
$ epicslide config.cfg


You can use macros to enhance your presentation:


Add notes to your slides using the .notes: keyword, eg.:

# My Slide Title

.notes: These are my notes, hidden by default

My visible content goes here

You can toggle display of notes by pressing the 2 key.

Some other macros are also available by default: .fx: foo bar will add the foo and bar classes to the corresponding slide <div> element, easing styling of your presentation using CSS.

Presenter Notes

You can also add presenter notes to each slide by following the slide content with a heading entitled “Presenter Notes”. Press the ‘p’ key to open the presenter view.

Registering Macros

Macros are used to transform the HTML contents of your slide.

You can register your own macros by creating epicslide.macro.Macro derived classes, implementing a process(content, source=None) method and returning a tuple containing the modified contents and some css classes you may be wanting to add to your slide <div> element. For example:

import epicslide

class MyMacro(epicslide.Macro):
  def process(self, content, source=None):
    return content + '<p>plop</p>', ['plopped_slide']

g = epicslide.generator.Generator(source='toto.md')
print g.render()

This will render any slide as below:

<div class="slide plopped_slide">
    <p>my slide contents</p>

Advanced Usage

Setting Custom Destination File

$ epicslide slides.md -d ~/MyPresentations/KeynoteKiller.html

Working with Directories

$ epicslide slides/

Working with Direct Output

$ epicslide slides.md -o | tidy

Using an Alternate Epicslide Theme

$ epicslide slides.md -t mytheme
$ epicslide slides.md -t /path/to/theme/dir

Embedding Base-64-Encoded Images

$ epicslide slides.md -i

Exporting to PDF

$ epicslide slides.md -d PowerpointIsDead.pdf


A Epicslide theme is a directory following this simple structure:

|-- base.html
|-- css
|   |-- print.css
|   `-- screen.css
`-- js
    `-- slides.js

If a theme does not provide HTML and JS files, those from the default theme will be used. CSS is not optional.

Last, you can also copy the whole theme directory to your presentation one by passing the --copy-theme option to the epicslide command:

$ epicslide slides.md -t /path/to/some/theme --copy-theme

User stylesheets and Javascripts

If you don’t want to bother making your own theme for tweaking up a bit your presentation style and/or add some interactivity using tiny bits of Javascript, you can include your own user css and js files to the generated presentation.

This feature is only available if you use a epicslide configuration file, by setting the css and/or js flags:

theme  = /path/to/my/beautiful/theme
source = slides.mdown
css =    custom.css
js =     jquery.js

These will link the custom.css stylesheet and both the jquery.js and powerpoint.js files within the <head> section of the presentation html file.

NOTE: Paths to the css and js files must be relative to the directory you’re running the epicslide command from.

Publishing your Presentation Online

If you intend to publish your HTML presentation online, you’ll have to use the --relative option, as well as the --copy-theme one to have all asset links relative to the root of your presentation;

$ epicslide slides.md --relative --copy-theme

That way, you’ll just have to host the whole presentation directory to a webserver. Of course, no Python nor PHP nor anything else than a HTTP webserver (like Apache) is required to host a epicslide presentation.

Theme Variables

The base.html must be a Jinja2 template file where you can harness the following template variables:

  • css: the stylesheet contents, available via two keys, print and screen, both having:
    • a path_url key storing the url to the asset file path
    • a contents key storing the asset contents
  • js: the javascript contents, having:
    • a path_url key storing the url to the asset file path
    • a contents key storing the asset contents
  • slides: the slides list, each one having these properties:
    • header: the slide title
    • content: the slide contents
    • number: the slide number
  • embed: is the current document a standalone one?
  • num_slides: the number of slides in current presentation
  • toc: the Table of Contents, listing sections of the document. Each section has these properties available:
    • title: the section title
    • number: the slide number of the section
    • sub: subsections, if any

Styles Scope

  • To change HTML5 presentation styles, tweak the css/screen.css stylesheet bundled with the theme you are using
  • For PDF, modify the css/print.css




Original Author and Development Lead



See https://github.com/adamzap/landslide/contributors

Base Template Authors and Contributors (html5-slides)

Related Repositories



HTML5/CSS slides ...

Top Contributors

n1k0 adamzap netantho fmonniot olivierverdier BestFriendChris blocke doug codito aaugustin charleso reagle durden maruel mtrythall roktas bradcupit svetlyak40wt anandology Lothiraldan soundmonster godfat mrallen1 harobed leblanc-simon