nbconvert template for generating ThebeLab enabled HTML page from ipynb notebook
<!-- | |
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 %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment