reveal.js presentation written in markdown set up with fabric & fabsetup

created by theno 2017-01-05 online src

1. reveal.js


“A framework for easily creating beautiful presentations using HTML.”

reveal.js supports Markdown

Writing slides in Markdown is easy:

## reveal.js

> "A framework for easily creating beautiful presentations using HTML."
> -- <cite></cite>

* It's basically a website displayed in a browser
* Works better with Chrome than Firefox
* Markdown support -> easy editing:
  * Don't bother with xml syntax
  * Write slides in a markdown file

reveal.js: Showroom

Some reveal.js presentations: * “Official” demo: * * * *

More demos:

2. fabric and fabsetup


“Fabric is a Python (2.5-2.7) library and command-line tool for streamlining the use of SSH for application deployment or systems administration tasks.”

>>shell-deploy-scripts on steroids!<<

fab and

  • contains the fabric tasks
    • Bash commands “written” in Python (2.5 - 2.7)
  • Command fab executes a task


from fabric.api import env, run, task

def show_ips():
    ips = run('/bin/hostname -I')
    print('IPs of {}:\n  {}'.format(, ips))

fab uses the fabfile of the current dir:

> ls
> fab show_ips  -H user@example_host
[example_host] Executing task 'ip_addresses'
[example_host] run: hostname -I
[example_host] out:

IPs of

  Done.  Disconnecting from example_host... done.


Collection of fabric tasks: * set up an owncloud server * set up an own android app repository (own F-Droid server) * set up a linux desktop: eg. configure vim, tmux, solarized colors (dotfiles on steroids!) * set up … * set up everything you need for a reveal.js presentation: sh fab setup.revealjs

3. fab setup.revealjs

A reveal.js Template

boilerplate for getting started on a nice reveal.js presentation: * reveal.js code installed (comes with built-in plugins) * Additional reveal.js plugins installed * index.html prepared accordingly * All slides are defined in

Set It Up

  • install fabsetup: sh sudo apt-get install git fabric # mkdir -p ~/repos && cd ~/repos git clone

  • run fabric task setup.revealjs: sh cd ~/repos/fabsetup fab setup.revealjs -H localhost

fab setup.revealjs

Asks for: * Presentation base directory * Title * Sub-title * Short description

fab setup.revealjs

Optionally: * Create github repo * Download npm libs

When running again (also optional): * Re-install reveal.js codebase


Boilerplate File Structure

~/repos/my_presi> tree
├── .git/
├── .gitignore
├──   <-- Short description and usage
├──   <-- All slides are defined here
├── index.html  <-- Configuration
├── img/
│   └── thanks.jpg  <-- good place for images
└── reveal.js/   <--.
    ├── css/         `-- reveal.js code "hidden" in a subdir
    ├── js/               (keeps the basedir clean)
    ├── plugin/
    ├── img -> ../img                \
    ├── reveal.js -> ../reveal.js     |_ symbolic links in order
    ├── -> ../     |   to run `npm start`
    └── index.html -> ../index.html  /

template features

Plugins Built-In

All the built-in plugins are enabled in the index.html: * marked.js, markdown.js: Markdown support * highlight.js: Code syntax highlighting * zoom.js: Zoom in and out with ALT+click * notes.js: Speaker notes * math.js: Formatting math expressions

Additional Plugins

This additional plugins will be installed and set up, too: * menu.js: Slideout menu (slide index, change theme and transition) * toc-progress.js: “LaTeX Beamer-like progress indicator” * title-footer.js: “Footer showing title of presentation”

Customizations in reveal.js

  • Don’t Capitalize Titles (NO FULL UPPERCASE HEADINGS)
  • Images are displayed without border

Special Markdown Slide dividers

Two dividers exist: * New horizontal slide: \n---- ----\n * New vertical slide: \n----\n

Win-win: * “Raw” Easy to read and edit * Horizontal lines in rendered Markdown: Easy to read, too

Create PDF

cumbersome. * With decktape

cd ~/bin/decktape/active && \                                               #
./phantomjs decktape.js --size 1280x800 URL ~/repos/my_presi/my_presi.pdf
  • Or just print the rendered by github into a PDF:

  • Printing with chromium (or chrome) does not work well:

Note: URL can be of: * localhost:8000 * page


Checkout the template presentation repo: sh git clone ~/repos/my_presi

Then: * Adjust <title>reveal.js template</title> in index.html * Edit * Add symbolic link: sh cd ~/repos/my_presi && ln -snf ../reveal.js reveal.js/reveal.js

4. Publishing at

Publishing as github page

A github repo (with index.html) can be rendered into a page

  1. Add remote repo at
    (automated in fabsetup task setup.revealjs)

  2. Configure entry point for page
    (manually, select “master branch”)

5. Conclusion and Outlook


  • Presentations with reveal.js are fancy and nice
  • Writing slides in Markdown is easy
  • fabric is a framework for powerfull setup scripts
  • fabsetup is a collection of fabric tasks

fab setup.revealjs (one of this tasks): Creates the boilerplate of your presentation: * Clean basedir (reveal.js codebase hidden in a subdir) * Slides are written in a Markdown file * Usefull plugins enabled (eg. footer, toc, menu) * Versioning with git * Publishing at

>>just edit the<<


  • Publishing with own webserver
    • Implement restricted access
  • Custom design
    • Create themes / corporate design
  • Explore more plugins
  • Customize fabsetup task setup.revealjs


prez“Opiniated Reveal slideshow generator with nice PDF output and ability to treat notes as first-class content.”


Thank You for Your attention!