Create slides from markdown that contain interactive code snippets.

See the live example.

[](https://travis-ci.org/bhugueney/asciidoctor-revealjs-klipse)

Notice that you can click into the code blocks and change them. It re-evaluates the code on the fly. This is handy for people who want to play around with your examples, or if you just want nice syntax highlighting.

This is a template project that shows how you can produce interactive slides.

The slides are generated using the Asciidoctor-revealjs converter. You can read the documentation on how to create slides here.

TLDR something like:

You can see the source for the slides in this repo under docs/slides.adoc.

1. Asciidoctor, a powerful toolchain for publishing

2. RevealJS, a slide deck generator

3. Klipse, an interactive client-side code evaluator.

The key things required to integrate Klipse inside the slides are:

1. Load the Klipse javascript. Trigger a window resize event on slide transition. This causes CodeMirror to resize. Otherwise when future slides get loaded, the code area is height 0. (see docs/docinfo-footer.html)

2. Avoid center aligning code and avoid scaling. (see docs/slide.attrs)

3. Override the CodeMirror-cursor and CodeMirror-scroll styles so that the cursor shows and clicking on the last line doesn’t scroll weirdly. Also override klipse-snippet and klipse-result to make them stand out a little. (see end of site/slides.css)

You’ll need Ruby and Bundler installed. If you prefer, you could also set up your own build based on NodeJS.

Gets dependencies and builds

Builds, watches for changes, rebuilds

An automated TravisCI builds and deploys whenever changes are pushed to the master branch. The automated deployment is configured in .travis.yml. See Github Pages deployment with Travis.

It is also possible to build and deploy the site to github pages manually: