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.
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.
-
Asciidoctor, a powerful toolchain for publishing
-
RevealJS, a slide deck generator
-
Klipse, an interactive client-side code evaluator.
The key things required to integrate Klipse inside the slides are:
-
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)
-
Avoid center aligning code and avoid scaling. (see docs/slide.attrs)
-
Override the
CodeMirror-cursorandCodeMirror-scrollstyles so that the cursor shows and clicking on the last line doesn’t scroll weirdly. Also overrideklipse-snippetandklipse-resultto make them stand out a little. (see end of site/slides.css)
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
GNU General Public License v3.0 See the LICENSE for the full license text.