Deck.js: fit extension

The fit extensions provides a proper re-scaling of the slides to the view-port. This extension avoid discovering problems with low resolution projectors or unusual aspect ratios.

DEMO:  presentation illustrating "fit" in deck.js.

Deck.js: simplemath extension

The simplemath extension allows you to use the latex syntax to type math equations in your slides. This extension uses a lightweight javascript to convert latex expressions to mathml. Your browser needs to support mathml or have a plugin enabling it. The MathJax library could also be used for a similar purpose (MathJax is more powerful but heavier).

DEMO:  presentation illustrating "simplemath" in deck.js.

Deck.js: svg extensions

The svg extension helps in including external SVG files in your presentations. For example, if you produce SVG files using inkscape or gnuplot, this extension helps you including them in your presentation. An SVG file can be included in many ways in an HTML page (e.g., using an img tag). However, the svg extension takes care of including the SVG files in such a way that they can be both styled using CSS and animated (by the anim extension).

DEMO:  presentation illustrating "svg" in deck.js.

Deck.js: events/step/anim extensions

These extensions provide a way of doing animations within the slides (not only when we change slide). Try the “anim” demo presentation below to see examples.

DEMO: (low-level)  presentation illustrating "step" in deck.js.
DEMO:  presentation illustrating "anim" in deck.js.

Deck.js: smartsyntax extension

The smartsyntax extension removes the need for knowing and writing HTML. It is a markdown-like, wiki-like syntax that allows you write slides in a more concise way. No compilation is needed, the interpretation is done every time the page is loaded.

The smartsyntax goes beyond markdown that is too limited for efficient presentation (adding classes to elements, making sections, etc). If you have troubles with it, don't hesitate to contact me at click-me ;-p @nospam.com.

DEMO:  default starterkit presentation illustrating only part of "smartsyntax".
demo of the old version:  presentation illustrating "smartsyntax" in deck.js.

Deck.js: clone/timekeeper extensions

The clone extension allows you to create a second window containing your presentation. This way, you can have a projected screen and a presenter view on your laptop. When you change slide on the presenter view, the projected screen automatically follows (and vice-versa). The default style of the presenter view shows the current and the next slide.

The timekeeper extension adds a timer on the presenter view and also records the time of each slide change. It can be very useful for rehearsals or debriefing. Timers can be reset using the Escape key (with shift to reset the presentation timer).

DEMO:  presentation illustrating "clone" and "timekeeper" in deck.js.

Deck.js: metadata extension

The metadata extension makes it possible to use the title of the HTML page and its metadata in your presentations. HTML metadata also act as “variables”: your presentation file is cleaner and contains less repetitions (e.g., your name, the date, etc).

DEMO:  presentation illustrating "metadata" in deck.js.

Deck.js: progress extension

The progress extension is an replacement for the default “status” extension (that shows the slide counter). Progress improves in 3 directions: it is easier to make a simple status that adapts in position and size, it provides very big flexibility for customized progress (progress bars etc), and it adds the concept of “fake end” (when you have 46 slides and want the total counter to show 42 instead).

DEMO:  presentation illustrating "progress" in deck.js.

Deck.js: various extensions and styles

Tiny extensions and tricks are illustrated in a dedicated demo presentation, that shows:

• attribution extension: to add some text and link on images that come from someone else
• container-styling extension: to set the style of the deck container when a slide is the current one (e.g., to not show the slide counter)
• splash: easily show a splash screen when your presentation is being loaded

DEMO:  presentation illustrating various other extensions in deck.js.

Deck.js: deck.js-theme-builder

I've started a project to generate variations of simple themes. Variations combine:

• a background color either dark or light,
• a dominant color for titles, chosen among six,
• a main font, chosen among two.

There is a separate repository for these themes.

DEMO:  dark-green-draft / light-blue / light-blue-draft / dark-green (default for the examples)

Deck.js: includedeck extension

The includedeck extension is special in the sense that its sole use is to replace much of the boilerplate code in your HTML file by a much shorter call to includedeck. With includedeck, your files are more readable and you are less likely to make a mistake when including extensions.

DEMO:  see the zip bundle to see how shorter a presentation is with includedeck.

Key(s)	Extension	Description
Navigation
⇨ PgDn SPACE ENTER	step	Step next: plays animation etc
⇦ PgUp ⌫	step	Step back
⇩	step	Next top-level slide
⇧	step	Previous top-level slide
Z	step	Goes to the end of the next top-level slide (browsing slides)
M	menu	Toggles the slide selector (showing all slides)
G	goto	Goes to slide (open goto menu)
Presenter view
C	clone	Pops up a clone and trigger the presenter view
ESC K	timekeeper	bang! Logs the current time and reset the greyed-out counter (in presenter view)
SHIFT+ESC	timekeeper	Reset the presentation timer (in presenter view)
Other
S	fit	toggle auto fit
B	blank	blanks the view (requires “blank” extension)
P	annotate	start annotating a slide (requires “annotate” extension)