Interactive ClojureScript in a blog with Klipse

Interactive ClojureScript in a blog with Klipse

I've always been looking  for ways to put interactive code in a blog. For Javascript, there's CodePen. For ClojureScript, there's KLIPSE

First, try fiddling with the ClojureScript expression below and be in awe at the marvel of modern technology!

(map #(* % 2) [1 2 3]) ;Try adding one more element between brackets.


Add the following script using code injection to the header. Click the Gear button on the top-right and select "Code Injection".

In Post Header, add the following CSS.

<link rel="stylesheet" 
  /* Override the theme's border and style it close to original klipse  */
  pre.language-klipse {
    border: 0;
    background: #eef;

And Post Footer, the script

    window.klipse_settings = {
        // css selector the elements to klipsify
        selector: '.language-klipse'
<script src="">


Create a code card by typing ```klipse then enter. Put in the code to show in the box. This merely creates the following <html> that the selector binds to

<!-- Ghost created these tags in the final page, dont type this in. -->
<pre class="language-klipse">
  <code class="language-klipse">
    .. (your code here)


  • The script is not minified. Per instruction in GitHub
Pay attention: for clojure interactive snippets, you must use the non-minified version of klipse as for the moment, self-host cljs doesn't support advanced compilation!
  • If you are tired of injecting code in every post, you can put it in site's code injection. This works in a similar way to setup a code for Google Analytics. Just be aware that the script is quite large (~1MB).
  • The original launch blog is very inspiring, but the instruction is quite outdated. Follow instructions in github.
  • The author also writes a blog about Clojure and is currently writing a book.