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

我正在使用我的首选演示工具创建基于web的演示文稿。由于我想演示少量的

nodejs

代码，所以我想使用。我不太明白如何在一个网页上嵌入多个实例，但我通过多次运行下面的代码，成功地解决了一些问题

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中，simple会隐藏并显示同一个网页的不同部分。由于网页本身只被加载一次，所以RunKit应该只被调用一次。至少，我是这么想的（显然，我似乎错了）

最后，实际的RunKit REPL帧在呈现之前需要一段时间。在开始时，只显示几行被截断的代码，但在等待一段时间后，整个帧将被渲染

---

我做错了什么？有更好的方法吗？

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

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

.embed{溢出：可见；}
log（“hello inside”）；
1 + 1
log（“外面你好”）；
1 + 1
log（“你好，无”）；
1 + 1
常量元素=[…document.getElementsByClassName（'embed'）]
常量笔记本=元素。减少（（笔记本，元素）=>{
const innerText=element.firstChild
const currentCell=window.RunKit.createNotebook({
元素，
gutterStyle:element.getAttribute（“数据槽”），
来源：innerText.textContent，
//加载嵌入后删除pre标记的文本内容
onLoad:（）=>innerText.remove（）
})
归还笔记本
}, [])

样本取自此处： 向下滚动，您将找到它