data8/_includes/js/thebelab.html

<!-- Include Thebelab for interactive code if it's enabled -->
{% if site.use_thebelab_button %}

<!-- Display Thebelab button in each code cell -->
{% include js/thebelab-cell-button.html %}

<script type="text/x-thebe-config">
    {
      requestKernel: true,
      binderOptions: {
        repo: '{{ site.binder_repo_org }}/{{ site.binder_repo_name }}',
        ref: '{{ site.binder_repo_branch }}',
      },
      codeMirrorConfig: {
        theme: "{{ site.codemirror_theme }}"
      },
      kernelOptions: {
        name: '{% if page.kernel_name %}{{ page.kernel_name }}{% else %}python3{% endif %}',
      }
    }
</script>
<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js" async></script>
<script>
    /**
     * Add attributes to Thebelab blocks
     */

    const initThebelab = () => {
        const addThebelabToCodeCells = () => {
            console.log("Adding thebelab to code cells...");
            // If Thebelab hasn't loaded, wait a bit and try again. This
            // happens because we load ClipboardJS asynchronously.
            if (window.thebelab === undefined) {
                setTimeout(addThebelabToCodeCells, 250)
            return
            }

            // If we already detect a Thebelab cell, don't re-run
            if (document.querySelectorAll('div.thebelab-cell').length > 0) {
                return;
            }

            // Find all code cells, replace with Thebelab interactive code cells
            const codeCells = document.querySelectorAll('.input_area pre')
            codeCells.forEach((codeCell, index) => {
                const id = codeCellId(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');
                }
            });

            // Remove the event listener from the page so keyboard press doesn't
            // Change page
            document.removeEventListener('keydown', initPageNav)
            keyboardListener = false;

            // Init thebelab
            thebelab.bootstrap();

            // Remove copy buttons since they won't work anymore
            const copyAndThebeButtons = document.querySelectorAll('.copybtn, .thebebtn')
            copyAndThebeButtons.forEach((button, index) => {
                button.remove();
            });

            // Remove outputs since they'll be stale
            const outputs = document.querySelectorAll('.output *, .output')
            outputs.forEach((output, index) => {
                output.remove();
            });

            // Find any cells with an initialization tag and ask ThebeLab to run them when ready
            var thebeInitCells = document.querySelectorAll('div.tag_thebelab-init');
            thebeInitCells.forEach((cell) => {
                console.log("Initializing ThebeLab with cell: " + cell.id);
                cell.querySelector('.thebelab-run-button').click();
            });
        }

        // Add event listener for the function to modify code cells
        const thebelabButtons = document.querySelectorAll('[id^=thebelab], [id$=thebelab]')
        thebelabButtons.forEach((thebelabButton,index) => {
            if (thebelabButton === null) {
                setTimeout(initThebelab, 250)
                return
            };
            thebelabButton.addEventListener('click', addThebelabToCodeCells);
        });
    }

    // Initialize Thebelab
    initFunction(initThebelab);
</script>
{% endif %}