Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
thesis defense presentation in DeckJS
JavaScript Ruby
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
deckjs
imgs
js
lib
sass
slides
views
.gitignore
.rvmrc
Gemfile
Gemfile.lock
Guardfile
README.textile
Rakefile
config.rb
index.html
meta.yml
server.rb

README.textile

Readme Deck.JS Builder

Live example

This projects provide an easy working with the awesome Deck.js using Ruby, HAML
and Compass. Starting guard and start editing your presentation. Guard will
rebuild the html and stylesheets (scss/sass) when changed. I used HAML as
templating, because I think it’s awesome and very clean. Textile/MD are not
flexible for me, e.g. using custom ids, tags and ruby functions.

Install:

 git clone https://github.com/zealot128/DeckJS-Builder
 cd DeckJS-Builder
 bundle
 guard

Then you can start editing:

  • slides/*.haml → the slides chapters
  • views/*.haml → the layout, title and toc slide
  • sass/screen.scss → The Stylings using Scss/Sass
  • meta.yml → Title and author
  • css/fonts/* → some free-to-use webfonts by fontsquirrel

Guard will automatically rebuild index.html and stylesheet when changed!

Automatic toc

With javascript there will be an automatic toc created.
Just have a div#toc somewhere, and give your section.slide the additional class:

  %section.slide.toc#custom-anchor
    %h1 Chapter Headline
  %section.slide.toc#another-custom-anchor
    %h2 Slide Headline

Only slides that have the .toc class and a h1 or h2 will show up inside the toc.

IMPORTANT: Until now, this includes my work-in-progress thesis’ defense
presentation, because I’am to lazy to put that one in a seperate repos :) Later
it will be extracted to have a clean empty presentation template

Syntax HL

  • pygmentize has to be installed to use that.
  • Debian/Ubuntu: apt-get install python-pygments
  • pygments rocks. It has the most lexers and a lot of output formats
  • Highlighting gets cached at .syntax-cache/ to make rebuilding faster

Changing Style:

  • Exporting stylesheet from pygments
  @import "syntax/colorful";
  /* like this */

Generating new styles:


pygmentize -S colorful -f html -a .highlight >> sass/syntax/colorful.scss

  1. List available styles
    pygmentize -L styles

Helpers

  = pygmentize "ruby" do
    :preserve
      def hello_world
        puts "hello world"
      end

  = image_tag_with_caption "imgs/bla.gif", "Source: flickr.com"
Something went wrong with that request. Please try again.