2

我正在使用我首选的演示工具RemarkJS创建一个基于 Web 的演示文稿。由于我想演示一小段nodejs代码，我想使用RunKit的REPL 嵌入功能。我不太清楚如何在单个网页上嵌入多个实例，但我设法通过多次运行以下代码来整理一些东西

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

我究竟做错了什么？有没有更好的方法来做到这一点？

4

1 回答 1

0

我有同样的问题并想通了。所以对于未来的用户来说，这就是你的做法。

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

于 2020-09-14T18:48:44.673 回答