[![Gem Version](https://badge.fury.io/rb/slippery.png)][gem] [![Dependency Status](https://gemnasium.com/plexus/slippery.png)][gemnasium] [![Code Climate](https://codeclimate.com/github/plexus/slippery.png)][codeclimate] [![Coverage Status](https://coveralls.io/repos/plexus/slippery/badge.png?branch=master)][coveralls] [gem]: https://rubygems.org/gems/slippery [gemnasium]: https://gemnasium.com/plexus/slippery [codeclimate]: https://codeclimate.com/github/plexus/slippery [coveralls]: https://coveralls.io/r/plexus/slippery # 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](https://github.com/plexus/conf-talks/tree/master/2015-rubyconf-lt-by) (look for `index.md`, `Rakefile`, and `style.css`) ## How to use 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 : ```ruby 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. ```ruby 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](http://github.com/plexus/hexp) DSL for details. You can also add built-in or custom processors directly ```ruby 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 ```ruby 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')` ## Processors These are defined in the `Slippery::Processors` namespace. ### GraphvizDot 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 ```ruby 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) dependencies slippery slippery hexp hexp slippery->hexp kramdown kramdown slippery->kramdown equalizer equalizer hexp->equalizer ice_nine ice_nine hexp->ice_nine