Last active
January 8, 2019 02:06
-
-
Save feynlee/701a56a239f7034e380e850865154945 to your computer and use it in GitHub Desktop.
A template for exporting Jupyter notebook to html file that adds a toggle button at the top to show/hide code. An example of generated html report can be seen here: https://nbviewer.jupyter.org/github/csaid/polished_notebooks/blob/master/notebook_polished.ipynb
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 'basic.tpl' -%} | |
{% from 'mathjax.tpl' import mathjax %} | |
{%- block header -%} | |
<!DOCTYPE html> | |
<html> | |
<head> | |
{%- block html_head -%} | |
<meta charset="utf-8" /> | |
{% set nb_title = nb.metadata.get('title', '') or resources['metadata']['name'] %} | |
<title>{{nb_title}}</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
{% block ipywidgets %} | |
{%- if "widgets" in nb.metadata -%} | |
<script> | |
(function() { | |
function addWidgetsRenderer() { | |
var mimeElement = document.querySelector('script[type="application/vnd.jupyter.widget-view+json"]'); | |
var scriptElement = document.createElement('script'); | |
var widgetRendererSrc = '{{ resources.ipywidgets_base_url }}@jupyter-widgets/html-manager@*/dist/embed-amd.js'; | |
var widgetState; | |
// Fallback for older version: | |
try { | |
widgetState = mimeElement && JSON.parse(mimeElement.innerHTML); | |
if (widgetState && (widgetState.version_major < 2 || !widgetState.version_major)) { | |
widgetRendererSrc = '{{ resources.ipywidgets_base_url }}jupyter-js-widgets@*/dist/embed.js'; | |
} | |
} catch(e) {} | |
scriptElement.src = widgetRendererSrc; | |
document.body.appendChild(scriptElement); | |
} | |
document.addEventListener('DOMContentLoaded', addWidgetsRenderer); | |
}()); | |
</script> | |
{%- endif -%} | |
{% endblock ipywidgets %} | |
{%- block toggle_script -%} | |
<script> | |
function code_toggle() { | |
if (code_shown){ | |
$('div.input').hide('500'); | |
$('#toggleButton').val('Show Code') | |
} else { | |
$('div.input').show('500'); | |
$('#toggleButton').val('Hide Code') | |
} | |
code_shown = !code_shown | |
} | |
$( document ).ready(function(){ | |
code_shown=false; | |
$('div.input').hide(); | |
$('div.prompt').hide(); | |
$('div.back-to-top').hide(); | |
$('nav#menubar').hide(); | |
$('.breadcrumb').hide(); | |
$('.hidden-print').hide(); | |
}); | |
</script> | |
{%- endblock toggle_script -%} | |
{% for css in resources.inlining.css -%} | |
<style type="text/css"> | |
{{ css }} | |
</style> | |
{% endfor %} | |
<style type="text/css"> | |
/* Overrides of notebook CSS for static HTML export */ | |
body { | |
overflow: visible; | |
padding: 8px; | |
} | |
div#notebook { | |
overflow: visible; | |
border-top: none; | |
} | |
{%- if resources.global_content_filter.no_prompt-%} | |
div#notebook-container{ | |
padding: 6ex 12ex 8ex 12ex; | |
} | |
{%- endif -%} | |
@media print { | |
div.cell { | |
display: block; | |
page-break-inside: avoid; | |
} | |
div.output_wrapper { | |
display: block; | |
page-break-inside: avoid; | |
} | |
div.output { | |
display: block; | |
page-break-inside: avoid; | |
} | |
} | |
</style> | |
<!-- Custom stylesheet, it must be in the same directory as the html file --> | |
<link rel="stylesheet" href="custom.css"> | |
<!-- Loading mathjax macro --> | |
{{ mathjax() }} | |
{%- endblock html_head -%} | |
</head> | |
{%- endblock header -%} | |
{% block body %} | |
<body> | |
<div tabindex="-1" id="notebook" class="border-box-sizing"> | |
<div class="container" id="notebook-container"> | |
<form action="javascript:code_toggle()"> | |
<input type="submit" id="toggleButton" value="Show Code"> | |
</form> | |
{{ super() }} | |
</div> | |
</div> | |
</body> | |
{%- endblock body %} | |
{% block footer %} | |
{{ super() }} | |
</html> | |
{% endblock footer %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment