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