Question

我正在使用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帧在渲染之前需要一段时间。在开始时，只显示几行截断的代码，但经过一段时间的等待后，整个帧都会被渲染。

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

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 向下滚动，您将找到它。

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

1 个答案: