在单个网页上嵌入多个RunKit REPL实例

Question

我正在使用RemarkJS创建一个基于web的演示文稿，这是我首选的演示文稿工具。因为我想演示一小段nodejs代码，所以我想使用RunKit的REPL embedding capability。我不太清楚如何在一个网页上嵌入多个实例，但我通过多次运行以下代码成功地搞砸了一些东西

var nb1 = RunKit.createNotebook({
    // the parent element for the new notebook
    element: document.getElementById("div1"),

    // specify the source of the notebook
    source: source1
})

var nb2 = RunKit.createNotebook({
    // the parent element for the new notebook
    element: document.getElementById("div2"),

    // specify the source of the notebook
    source: source2
})

诸若此类。这实际上是有效的，但效率非常低。当我启动我的演示文稿时，即使整个页面只加载一次，也会多次调用RunKit。不仅如此，每次我更改幻灯片时，都会多次调用RunKit，在RemarkJS中，它简单地隐藏和显示同一个网页的不同部分。因为网页本身只被加载一次，所以RunKit应该只被调用一次。至少，这是我的想法(显然，看起来我错了)。

最后，实际的RunKit REPL帧需要一段时间才能呈现。在开始时，只显示几行截断的代码，但经过一段时间的等待后，整个帧都会呈现出来。

我做错了什么？有没有更好的方法来做这件事？

Answer 1

我也有同样的问题，并解决了它。因此，对于未来的用户，这里就是你如何做到这一点的。

<script src="https://embed.runkit.com"></script>
<style>.embed { overflow: visible; }</style>
<pre class="embed" data-gutter="inside">console.log("hello inside");
1 + 1</pre>
<pre class="embed" data-gutter="outside">console.log("hello outside");
1 + 1</pre>
<pre class="embed" data-gutter="none">console.log("hello none");
1 + 1</pre>
<script>
const elements = [...document.getElementsByClassName('embed')]
const notebooks = elements.reduce((notebooks, element) => {
    const innerText = element.firstChild
    const currentCell = window.RunKit.createNotebook({
        element,
        gutterStyle: element.getAttribute("data-gutter"),
        source: innerText.textContent,
        // Remove the text content of the pre tag after the embed has loaded
        onLoad: () => innerText.remove()
    })
  return notebooks
}, [])
</script>

样本取自这里：https://runkit.com/docs/embed向下滚动，你会找到它。