Slippery

Create HTML slides from Markdown, backed by Reveal.js, Impress.js, or Deck.js.

Because Slippery slides are the best slides.

When doing conferences you might find yourself on trains, planes, or flaky conference wifi. Slippery finds all assets used by your presentation and stores them locally, including CSS, Javascript, images, and webfonts. You can drop the result on a thumb drive and run anywhere, no network required.

Here's an example slide deck (look for index.md, Rakefile, and style.css)

Create a markdown file, say presentation.md, that will be the source of your presentation. use --- to separate slides.

In the same directory, create a Rakefile, the most basic form is :

require 'slippery'

Slippery::RakeTasks.new

Slippery will detect and markdown files in the current directory, and generate rake tasks for them.

rake slippery:build               # build all
rake slippery:build:presentation  # build presentation

You can use a block to configure Slippery. If the block takes an argument it will receive the slippery config object, otherwise the block is instance_evaled in the right scope.

require 'slippery'

Slippery::RakeTasks.new do
  title "Hypermedia in Practice | @plexus"
  type :reveal_js
  add_highlighting :default, '8.2'

  js_options theme: 'sky', # beige default moon night serif simple sky solarized
             transition: 'none',
             backgroundTransition: 'none',
             width: 1500,  #1680,
             height: 1000,  #1050
             loop: true


  pack_assets

  processor 'head' do |head|
    H[:head, head.attributes, head.children + [
        H[:meta, charset: 'utf-8'],
        H[:meta, name: 'viewport', content: 'width=1024'],
        H[:meta, "http-equiv" => 'X-UA-Compatible', content: 'IE=edge,chrome=1'],
        H[:link, rel: 'stylesheet', type: 'text/css', href: 'style.css'],
        H[:script, {type: 'text/javascript'}, File.read('ga.js')],
      ]
    ]
  end
end

After converting your presentation from Markdown, you can use Hexp to perform transformations on the result. This is what happens with the processor, you pass it a CSS selector, each matching element gets passed into the block, and replaced by whatever the block returns. See the Hexp DSL for details.

You can also add built-in or custom processors directly

Slippery::RakeTasks.new do |s|
  s.processors << Slippery::Processors::GraphvizDot.new('.dot')
end

The rake task also has a few DSL methods for common use cases

Slippery::RakeTasks.new do |s|
  s.title "Functional Programming in Ruby"
  s.include_assets
  s.add_highlighting
end

• title Configure the title used in the HTML <title> tag
• include_assets Download/copy all js/css/images to the assets directory, and adjust the URIs in the document accordingly
• add_highlighting Add Highlight.js. Takes the style and version as arguments, e.g. add_highlighting(:default, '0.8.0')

These are defined in the Slippery::Processors namespace.

The "Dot" language is a DSL (domain specific language) for describing graphs. Using the GraphvizDot processor, you can turn "dot" fragments into inline SVG graphics. This requires the dot command line utility to be available on your system. Look for a package named graphviz.

In your presentation :

````dot
graph dependencies {
  node[shape=circle color=blue]
  edge[color=black penwidth=3]

  slippery[fontcolor=red];

  slippery -> hexp -> equalizer;
  slippery -> kramdown;
  hexp -> ice_nine;
}
````

In the Rakefile

Slippery::RakeTasks.new do |s|
  s.processors << Slippery::Processors::GraphvizDot.new('.dot')
  s.processors << Slippery::Processors::SelfContained
end

And the result:

(this is an SVG inside a Markdown file, Github used to do this just fine, but not any more)