Running with Thebelab

Have you looked at providing additional support for ThebeLab within notebookjs so that a user could run the code in the page against a remote kernel of Binderhub launched kernel?

The following minor change seems to work.

In nb.Input.prototype.render, present the code as simply as possibly, in an appropriately configured <pre> tag (ThebeLab looks for code contained in a <pre data-executable="true" data-language="python"></pre> tag):

        var pre_el = makeElement("pre");
        pre_el.setAttribute("data-executable", "true");
        pre_el.setAttribute("data-language", lang); //lang is the desired kernel
        pre_el.innerHTML = joinText(this.raw);
        holder.appendChild(pre_el);

Add in some ThebeLab config information to the index.html page:

        <script type="text/x-thebe-config">
          {
            requestKernel: true,
            binderOptions: {
              repo: "binder-examples/requirements",
            },
          }
        </script>

Then crib from the ThebeLab docs to add a simple button to the top of the index.html page to enable the code for execution:

<script type="text/javascript" src="https://unpkg.com/thebelab@^0.4.0" ></script>
<div>
    <button id="activateButton"  style="width: 150px; height: 75px; font-size: 1.5em;">Activate</button>
    <script>
         var bootstrapThebe = function() {
            thebelab.bootstrap();
        }
        document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
    </script>
</div>

Start with nb.Input.prototype.render in the JavaScript source and index.html, then compare the proposed ThebeLab markup with the current notebook rendering. Verify that rendered code uses the required pre attributes and that the page’s activation button and configuration connect to a Binderhub kernel. Done means a browser-loaded notebook can activate ThebeLab and run its code remotely.