/asciidoctor-revealjs-klipse

Slides with interactive code snippets

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

asciidoctor-revealjs-klipse

Create slides from markdown that contain interactive code snippets.

See the live example.

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.

About

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:

== Slide Title

Hello and welcome to my talk!

[source,eval-clojure]
(+ 1 2)


== Another Slide

Now for something a little different...


=== A Vertical Slide

[source,eval-clojure]
(inc 1)

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

Dependencies

  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)

Building

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

./bb.sh

Gets dependencies and builds

./watch.sh

Builds, watches for changes, rebuilds

Deploying

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:

./deploy.sh

License

GNU General Public License v3.0 See the LICENSE for the full license text.