-
-
Save idavydov/1a27e902ad2df35c93fad57fe9894792 to your computer and use it in GitHub Desktop.
A Jupyter NBConvert HTML template adding a toggle to hide/show each code cell.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# You need to put index.html.j2 & conf.json into a directory called, e.g., mytmpl/. | |
# Typical usage: The --no-prompt is important (layout is all messed up otherwise). | |
jupyter nbconvert MySuperNotebook.ipynb --to html --no-prompt --template mytmpl/ | |
# By default, all cells are hidden. You can override this behavior for some cells by giving them a 'code_shown' tag. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"base_template": "lab", | |
"mimetypes": { | |
"text/html": true | |
}, | |
"preprocessors": { | |
"100-pygments": { | |
"type": "nbconvert.preprocessors.CSSHTMLHeaderPreprocessor", | |
"enabled": true | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% extends 'lab/index.html.j2' %} | |
{% block html_head %} | |
{{ super() }} | |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" | |
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" | |
crossorigin="anonymous"></script> | |
<script> | |
$(document).ready(function() { | |
$('.code_shower').on('click',function(){ | |
var header = $(this); | |
var codecell = $(this).next() | |
codecell.slideToggle(0, function() { | |
if (codecell.is(':hidden')) { | |
header.text("Show Code"); | |
header.css("border-radius", "2px 2px 2px 2px"); | |
} else { | |
header.text("Hide Code"); | |
header.css("border-radius", "2px 2px 0px 0px") | |
} | |
}); | |
}); | |
$('.hidden_default').next().hide(); | |
}); | |
</script> | |
<style> | |
div.input { | |
flex-direction: column !important; | |
} | |
div.input_area { | |
border-radius: 0px 0px 2px 2px; | |
} | |
div.code_shower { | |
background: lightgray; | |
padding: 5px 10px; | |
cursor: pointer; | |
border-radius: 2px 2px 0px 0px; | |
} | |
</style> | |
{% endblock html_head %} | |
{% block input %} | |
{% if 'code_shown' in cell['metadata'].get('tags', []) %} | |
<div class="code_shower">Hide Code</div> | |
{% else %} | |
<div class="code_shower hidden_default">Show Code</div> | |
{% endif %} | |
{{ super() }} | |
{% endblock input %} | |
{% block output_prompt %} | |
{% endblock output_prompt %} | |
{% block in_prompt %} | |
{% endblock in_prompt %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It works for me.
Can you also support RST? It's gonna be great.
Thank you a lot!