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

【问题标题】：embedding multiple RunKit REPL instances on a single web page在单个网页上嵌入多个 RunKit REPL 实例
【发布时间】：2017-11-14 11:41:00
【问题描述】：

我正在使用RemarkJS 创建一个基于网络的演示文稿，这是我的首选演示工具。由于我想演示一小段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 帧在渲染之前需要一段时间。一开始只显示几行被截断的代码，但等待一段时间后，整个帧都被渲染了。

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

【问题讨论】：

标签： runkit remarkjs

【解决方案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 向下滚动，您会找到它。

【讨论】：