Skip to main content

Make reveal.js presentations with Flask

Project description

# Flask Reveal

[![PyPI - License](](
[![PyPI - Python Version](](
[![Build Status](](
[![Coverage Status](](
[![Code Health](](

[flask-reveal]( is a cool way to setup your [reveal.js]( presentations without the need to edit a monolithic html file and using markdown syntax mixed with some html tags.

## Requirements

The current version of flask-reveal runs on python 3.x

- Flask
- reveal.js

## Installation

You can install it from the PyPI:

$ pip install flask-reveal

## Usage

### Running the Presentation

To start your presentation run:

$ flaskreveal start [-m=MEDIA | --media=MEDIA] [-d | --debug] PATH

The `PATH` is the path to the markdown presentation file.

The `MEDIA` value sets custom media folder. If not passed, sets to default **img\** folder inside the presentation folder.

### Creating a new Presentation

To create a new presentation run:

$ flaskreveal mkpresentation [NAME]

### Install/Update reveal.js files

If you need for some reason reinstall reveal.js files, just run the following command:

$ flaskreveal installreveal

It will download reveal.js from a default **url** and make the install. If you want to set the **url** by yourself:

$ flaskreveal installreveal -u URL

If you already have the reveal.js file:

$ flaskreveal installreveal -f FILE

Where the `FILE` can be either the **.tar.gz** or the **.zip** release file found at the [reveal.js releases](

### PDF Export

Presentations can be exported to PDF via a special print stylesheet. This feature will be described using [Google Chrome]( or [Chromium](, but I got the same results using [Firefox](

1. Run the presentation with flask-reveal.
2. Open your brownser with the `print-pdf` as query string like : `localhost:5000/?print-pdf`.
3. Open the in-browser print dialog (CTRL+P or CMD+P).
4. Change the **Destination** setting to **Save as PDF**.
5. Change the **Layout** to **Landscape**.
6. Change the **Margins** to **None**.
7. Enable the **Background graphics** option.
8. Click **Save**.

Alternatively you can use the [decktape]( project.

### Share your presentation using [Ngrok](

You can easily share your presentation using [Ngrok]( Download it, and put the binary file at root. Then you can do :
$ ngrok http 5000
This assume `5000` is your localhost.
`ngrok` will create a secure tunnel to your localhost :

ngrok by @inconshreveable (Ctrl+C to quit)

Tunnel Status online
Version 2.0.19/2.1.1
Web Interface
Forwarding -> localhost:5000
Forwarding -> localhost:5000

Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00

## Presentation Setup

The flask-reveal checks for three things on your presentation folder.

### The '' File

This is your presentation file written using markdown with some especial tags described on [markdown section](#markdown) and is placed on your presentation root folder.

Split your slides by setting up a *slide separator* into **REVEAL_CONFIG**. Default separator is `---`.

### The 'img' folder

All images used on your presentation are placed inside the **'img'** folder and referenced on your slides starting from your presentation root.

![Python Logo](img/python.png)

### The '' File

The configuration file are placed on the presentation root folder and is responsible to customize your presentation.

This file is optional and can the values above can be changed:

**REVEAL_META**: python dictionary with metadata from the presentation

# Title of the slide
'title': 'The title',

# Author in the metadata of the slide
'author': 'Some Author',

# Description in the metadata of the slide
'description': 'Some description'

**REVEAL_THEME**: string with reveal theme of choice

# Themes
# beige, black, blood, league, moon, night, serif, simple, sky,
# solarized, white
REVEAL_THEME = 'black'

**REVEAL_CONFIG**: python dictionary with the [reveal.js configuration attributes]( but using python types (e.g.: true is python boolean True)

# Slide separator
'slideSep': '---',

# Display controls in the bottom right corner
'controls': True,

# Display a presentation progress bar
'progress': True,

# Display the page number of the current slide
'slideNumber': False,

# Push each slide change to the browser history
'history': True,

# Enable keyboard shortcuts for navigation
'keyboard': True,

# Enable the slide overview mode
'overview': True,

# Vertical centering of slides
'center': True,

# Enables touch navigation on devices with touch input
'touch': True,

# Loop the presentation
'loop': False,

# Change the presentation direction to be RTL
'rtl': False,

# Turns fragments on and off globally
'fragments': True,

# Flags if the presentation is running in an embedded mode,
# i.e. contained within a limited portion of the screen
'embedded': False,

# Flags if we should show a help overlay when the questionmark
# key is pressed
'help': True,

# Flags if speaker notes should be visible to all viewers
'showNotes': False,

# Number of milliseconds between automatically proceeding to the
# next slide, disabled when set to 0, this value can be overwritten
# by using a data-autoslide attribute on your slides
'autoSlide': 0,

# Stop auto-sliding after user input
'autoSlideStoppable': True,

# Enable slide navigation via mouse wheel
'mouseWheel': False,

# Hides the address bar on mobile devices
'hideAddressBar': True,

# Opens links in an iframe preview overlay
'previewLinks': False,

# Transition style
# default/cube/page/concave/zoom/linear/fade/none
'transition': 'default',

# Transition speed
'transitionSpeed': 'default', # default/fast/slow

# Transition style for full page slide backgrounds
# default/none/slide/concave/convex/zoom
'backgroundTransition': 'default',

# Number of slides away from the current that are visible
'viewDistance': 3,

# Parallax background image
# e.g.:
# "''"
'parallaxBackgroundImage': '',

# Parallax background size
'parallaxBackgroundSize': '', # CSS syntax, e.g. "2100px 900px"

# Amount to move parallax background (horizontal and vertical)
# on slide change
# Number, e.g. 100
'parallaxBackgroundHorizontal': '',
'parallaxBackgroundVertical': '',

## Markdown

The markdown used on the presentation files support most of the [GitHub Markdown]( and adds some especial html comment tags to edit styles and control effects that are explained on the [reveal.js markdown docs](

**Important:** You can use all html tags on the presentation files, but some block tags can present unexpected behavior.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

flask-reveal-0.4.4.tar.gz (14.8 kB view hashes)

Uploaded Source

Built Distributions

flask_reveal-0.4.4-py3-none-any.whl (22.4 kB view hashes)

Uploaded Python 3

flask_reveal-0.4.4-py2-none-any.whl (22.4 kB view hashes)

Uploaded Python 2

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page