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.

Preparing

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" 
      type="text/css" 
      href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<style>
  /* Override the theme's border and style it close to original klipse  */
  pre.language-klipse {
    border: 0;
    background: #eef;
  }
</style>

And Post Footer, the script

<script>
    window.klipse_settings = {
        // css selector the elements to klipsify
        selector: '.language-klipse'
    };
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js">
</script>

Usage

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)
  </code>
</pre>

Note

  • 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.