A year or so ago I was playing around with building an online Introduction to Python course, but I got distracted by this problem that seemed like it should be solved: how can I embed runnable snippets on the web?
There’s a bunch of closed-source solutions that rely on other services. I was hoping for a way to just install a package, and then run code. Especially small snippets like
If you're looking to embed a runnable snippet of code it's pretty straightforward with Runno. Let's say I'm writing a blog post explaining how
if statements work in Python, and I have this snippet of code:
name = input("What's your name? ") if "i" in name.lower(): print("You've got an I in your name, how selfish.") else: print("There's no I in your name.")
To use Runno all I have to do is visit the runno.dev website and paste in my code snippet:
Then copy the HTML for the iframe out of Runno, and into your blog. Here the iframe code is:
<iframe src="https://runno.run/?editor=1&runtime=python&code=bmFtZSA9IGlucHV0KCJXaGF0J3MgeW91ciBuYW1lPyAiKQppZiAiaSIgaW4gbmFtZS5sb3dlcigpOgogIHByaW50KCJZb3UndmUgZ290IGFuIEkgaW4geW91ciBuYW1lLCBob3cgc2VsZmlzaC4iKQplbHNlOgogIHByaW50KCJUaGVyZSdzIG5vIEkgaW4geW91ciBuYW1lLiIp" crossorigin allow="cross-origin-isolated" width="640" height="320" frameBorder="0"></iframe>
You'll notice that it has a fixed
height. This is to make it easy to paste in, but you can change those values!
On Dev you can't put an iframe in, but you can use a Codepen. Here I've made a codepen that just has the iframe inside of it, then styled the iframe to fit the full space of the codepen.
And now you can run the example code snippet!
If you're interested in learning more ways to use Runno there's some documentation on the website: https://runno.dev/#examples
Or if you're interested in contributing - it's Open Source: