Встраивание нескольких экземпляров RunKit REPL на одной веб-странице

Question

Я создаю веб-презентацию, используя RemarkJS, мой любимый инструмент для презентаций. Так как я хочу продемонстрировать небольшие кусочки nodejs код, я хочу использовать возможность встраивания REPL RunKit. Я не мог понять, как встроить несколько экземпляров на одной веб-странице, но мне удалось что-то запутать, запустив следующий код несколько раз

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 Прокрутите вниз, и вы его найдете.