nbconvert template for generating ThebeLab enabled HTML page from ipynb notebook

thebelab.tpl

<!--
Template to geneate a ThebeLab enhanced HTML page.

The Binder / Jupyyer kernel target needs setting explicitly in the template.

Run using: jupyter nbconvert --to html 'my notebook.ipynb' --template=thebelab.tpl
 -->

{% extends 'full.tpl'%}

{% block header %}

{{ super() }}



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

<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>
{% endblock header %}


{%- block body %}
<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>

{{ super() }}

<script>
//via https://github.com/jupyter/jupyter-book/blob/c37959a8ae8923fafecb64c46e95c026b3739cac/jupyter_book/book_template/_includes/js/thebelab.html#L44
// Find all code cells, replace with Thebelab interactive code cells
            const codeCells = document.querySelectorAll('.input_area pre')
            codeCells.forEach((codeCell, index) => {
                codeCell.setAttribute('data-executable', 'true')
                // Figure out the language it uses and add this too
                var parentDiv = codeCell.parentElement.parentElement;
                var arrayLength = parentDiv.classList.length;
                for (var ii = 0; ii < arrayLength; ii++) {
                    var parts = parentDiv.classList[ii].split('language-');
                    if (parts.length === 2) {
                        // If found, assign dataLanguage and break the loop
                        var dataLanguage = parts[1];
                        break;
                    }
                }
                codeCell.setAttribute('data-language', dataLanguage)
                // If the code cell is hidden, show it
                var inputCheckbox = document.querySelector(`input#hidebtn${codeCell.id}`);
                if (inputCheckbox !== null) {
                    setCodeCellVisibility(inputCheckbox, 'visible');
                }
            });
</script>
{%- endblock body %}