Slideoff ↑

Slideoff is a presentation tool. You write some slides in markdown, choose a style and it displays it in HTML5. With a browser in full-screen, you can make amazing presentations!

Demo ↑

Click here for a demonstration.

Requirements ↑

Features ↑

First presentation ↑

  1. Install ruby and some dependencies from Requirements section

  2. gem install slideoff Install Slideoff

  3. slideoff init mypres Initialize presentation in mypres/

  4. $EDITOR presentation.json and add your Flickr API key

  5. $EDITOR main/index.md Edit your slides

  6. slideoff serve Start server

  7. Open localhost:9000/

  8. Use the arrow keys to navigate between slides

Themes ↑

Several themes are available: modern, io2012, shower, 3d_slideshow, reveal, html5rocks, CSSS and memories. To choose the theme for your presentation, edit the presentation.json file and change the "theme" element.

Attention: Some of the following features are only implemented in modern theme.

Override some theme styles by using style.css in the presentation directory. Another way is to clone the theme via slideoff install_theme <git-url> and make changes there. Be sure to use the correct theme name in presentation.json.

Assets are looked up in this order:

  1. ./<asset_name>

  2. .config/slideoff/themes/<theme_name>/<asset_name>

  3. installation_dir/themes/<theme_name>/<asset_name>

  4. installation_dir/themes/common/<asset_name>

Markup for the slides ↑

This slides are written in Markdown and !SLIDE is the indicator for a new slide.

Example:

!SLIDE
# Title of the first slide
## A subtitle
And some text...

!SLIDE
# Another slide

* a
* bullet
* list

!SLIDE
# Third slide

1. **bold**
2. _italics_
3. https://github.com/

Many more additional elements are added. See main/index.md after initialization to get an example.

Syntax Highlighting ↑

To highlight some code in your slides, you have to install pygments. Then, surround your code with backticks like this:

```ruby
class Foobar
  def baz
    puts "Foobar says baz"
  end
end
```

Different syntax highlighting styles exist in modern theme: colorful, github, solarized-light, solarized-dark

Formulas (modern theme) ↑

MathJax is integrated and you can write your formulas in LaTeX. Example:

<p>
Pythagoras as inline equation: \( a^2 + b^2 = c^2 \)
</p>

<p>
Fibonacci as displayed equation:
$$
  F_n =
  \begin{cases}
  n & \quad \text{if } n \leq 1 \\
  F_{i-1} + F_{i-2} & \quad \text{otherwise} \\
  \end{cases}
$$
</p>

Flickr integration (modern theme) ↑

To integrate this Flickr photo (22565509) you have to write this:

!F[22565509]

Only the ID of the photo is relevant. All other information like image source, title, author or license are requested via the Flickr API. So it's important to generate a Flickr API key to have access to the API. You can do it on secure.flickr.com/services/apps/create/. You have to specify this key in your presentation.json.

Boxes (modern theme) ↑

!SLIDE
#Boxes

+++
+++Normal box
+++Content

+++shadow
+++Box with shadow
+++Content

+++box-alert
+++Alert box
+++Content

Description list (modern theme) ↑

!SLIDE
#Description list

Elephant
  : big animal
House
  : big garage
Car
  : big bike with four wheels
Smartphone
  : smart mobile phone with touch display

Change colors ↑

Highlighting text with red background:

==red==text==

Red text:

__red__text__

Incremental view of slide (modern theme) ↑

If you like to display some information incrementally, you can do it! If you specify an additional slide class incr-list and all li-HTML-Elements will be displayed after some key strokes. For example:

!SLIDE incr-list

* First item will be displayed after first key stroke
* Second item will be displayed after second key stroke
* Third item will be displayed after third key stroke

If you like to add some opacity to visited elements, you can add incr-list hover to !SLIDE.

If you don't like to always increment list items, you can do it more precise. You only have to add !PAUSE to your slide. For example:

!SLIDE

This paragraph will be displayed first.

!PAUSE

+++box-red shadow
+++Box
+++This box is displayed after one next key stroke.

Try it in your example presentation after initialization.

You can add many states to one slide via the following snippet:

!SLIDE
...
!STEPS[n]

After each keystroke on right a class step-i is added to the .slide element while i is a number betweet 0 and n-1. So you can change your styling for these different states. For example you can translate an element via CSS. After these n keystrokes the next slide will be displayed.

Issues or Suggestions ↑

Found an issue or have a suggestion? Please report it on Github’s issue tracker.

Credits ↑

Bruno Michel is the guy who made Slide’em up and Scott Chacon is the guy who made ShowOff. Slideoff is based on Slide'em up and Showoff.

Themes were picked from the internet. Thanks to:

♡2014 by DSIW. Copying is an act of love. Please copy and share. Released under the MIT license