Getting ShowOff source code high-lighting for Clojure

ShowOff is a presentation software where you create your slides by writing simple text files containing markdown formatting. Styling is done using CSS. The slides are served by a web server and can be displayed in a web browser. With a simple command, a presentation can be deployed on Heroku for everyone to see. ShowOff can even execute code and show the result (currently that’s possible for Ruby and JavaScript).

ShowOff is great if you are fed up with the bloated presentation applications that make a mess of your source code. Text files means that presentations can be properly version controlled. It’s easy to re-arrange slides and sections. ShowOff uses SHJS to highlight code blocks. It supports many languages, but currently not Clojure. Searching around for a while revealed a Gist of SHJS styling code that I wanted to try out:

This is what I did on my MacOSX Snow Leopard to get ShowOff to high-light Clojure source code:

1. Install some pre-requisites. I use HomeBrew, but you can use MacPorts or whatever package manager you prefer.

2. Download the shjs source distro.

3. Unzip shjs-0.6-src.zip somewhere which we will call SHJS_HOME

4. cd SHJS_HOME

5. touch source-highlight-lang/clojure.lang

6. Edit source-highlight-lang/clojure.lang and paste this Clojure source code high-lighting spec (that’s the same as displayed above).

7. My Perl installation needed a recursive descent parser, so I did this:
cpan install Parse::RecDescent

8. make

9. I then copied the resulting minified JavaScript file to where my ShowOff gem keeps the language style files. I use the RVM Ruby manager, so this is where I needed it:

Should you discover that you need some more tools installed, you can clean up with make maintainer-clean. After you installed whatever you were missing, run make again.

Testing Clojure high-lighting

In order to test this, we will create a simple presentation called “mypres”:

This creates a new directory mypres. We go to that directory and look around:

OK, so we have now the skeleton of a presentation, containing a section folder named one and a set of slides in the 01_slide.md file. Looking closer at that file, we see this:

We will now add to this file a slide definition with some Clojure source code, formatted as a code block by indenting it. Note that we have preceded the code with @@@ clojure, in order to tell ShowOff what language we want to format the block as:

We serve the presentation:

Finally we can watch the presentation by browsing to http://localhost:9090

ShowOff source code high-lighting for Clojure

2 Comments

  1. peter winzell

    cool !

Leave a Reply