JavaScript are really everywhere, and now you can even embedding Node.js REPL into an html / blog post using RunKit.

In this article I try to explain how to setup your Ghost Theme so it can embed multiple RunKit Notebook in it.

In the official RunKit website, there is tutorial about how to embed RunKit notebook, but just one notebook for one page because it uses id as identifier. In this article I will show you how to embed multiple RunKit notebook using a class as identifier.

First, add this script into your .hbs

<script src="https://embed.runkit.com"></script>

It will add global variable called RunKit that we will use it to invoke RunKit to render notebook element.

Second, choose class that identify if it was the RunKit Element, I assume it will be runkit-element

Last, add this script

(function(){
    const runkitElements = document.querySelectorAll('.runkit-element');
    runkitElements.forEach(function(element){
        const source = element.innerHTML;
        item.innerHTML = '';
        RunKit.createNotebook({element, source});
    });
})();

Now, Embed your Node.js code

write this into your markdown editor

<pre class="runkit-element">
const faker = require('faker');
const data = Array(100).fill().map(function(item) {
    return {
        email: faker.internet.email(),
        username: faker.internet.userName(),
    };
});
console.log(data);
</pre>

the result will be like this.

const faker = require('faker');
const data = Array(100).fill().map(function(item) {
    return {
        email: faker.internet.email(),
        username: faker.internet.userName(),
    };
});
console.log(data);

and you can embed multiple notebook.

console.log('second notebook');

Now, just hit button run and you're running Node.js REPL onto your blog. YAY!!