Giving someone a snippet of code for them to copy into their editor and run is cool, but giving them live code that they can run right there in their browser is like wow. These days I'm all about JavaScript and ClojureScript, and in this post I'll show you how to embed them. Let's go!
Scratch-pad, REPL-ish, Web-apps
Online editors like plunkr and klipse not only let you share your code, but they let you experiment with code in a different environment from your current project. They allow you to just dump code out and try things and hack away parts and refactor and completely throw it out if you need to. Sometimes I like to do this, and I think it is especially useful for learning clojure, playing around with core functions and data structures, and you can even easily import other libraries into your web project environment! Of course this doesn't replace git, leiningen, intellij, or webpack, the command shell, etc..., but I really do think these live web editors are great little tools that can help when developing applications in addition to being an awesome way to show some code on a blog page.
Embed JavaScript With Plunkr
I like to use plunkr to embed html and javascript code snippets. I'm able to ebed this bit of html in my blog post's html to get this nice, live code editor in my page!
<iframe style="width: 100%; height: 600px" src="https://embed.plnkr.co/lhzZMEcVKN42gsNrX35A/" frameborder="0" allowfullscren="allowfullscren"></iframe>
You can replace the value of the src attribute to any plunkr URL to display it!
Embed ClojureScript With Klipse
For ClojureScript I like to use the klipse webapp. This one require one extra little step that is mentioned in the github README, but all you have to do is straight up copy this "setup code" for javascript / html:
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css"> <script> window.klipse_settings = { selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify }; </script> <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Then, just like in the javascript plunkr example, you need embed an iframe with the url to your klipse clojurescript project. You can hit Ctrl + s in the klipse web-app to get the URL with the current code in it.
<iframe style="width: 100%; height: 600px" src="http://app.klipse.tech/?cljs_in=(println%20%22hello!%22)%0A42" frameborder="0" allowfullscren="allowfullscren"></iframe>
RSS Feed