Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert an ipython notebook to html with collapsed output (and/or input)

I have an ipython notebook I'd like to share with colleagues who may not have ipython installed.

So I converted it to html with :

ipython nbconvert my_notebook.ipynb

But my problem is that I have very long outputs which make the reading difficult, and I'd like to know whether it's possible to have the collapse or scroll option of the notebook viewer on the html version.

Basically, I'd like this : output example enter image description here

But in the html version. Is this even possible ?

Thanks for helping !

like image 465
jrjc Avatar asked Jun 05 '14 13:06

jrjc


People also ask

How do I convert a python notebook to HTML?

This method is as simple as clicking File, Download as, HTML (. html). Jupyter will then download the notebook as an HTML file to wherever the browser defaults for downloaded files. Screenshot of export by author.

How do you collapse a Jupyter Notebook output?

There is a shortcut for that: use o (that is the letter o) in the command mode to expand/collapse. Or capital O to switch between scrolling/expanded output. See menu > help > Keyboard Shortcuts.

How do I export a Jupyter Notebook to HTML?

The most strightforward way to get HTML file from Jupyter Notebook is to use Download as function inside the Jupyter application. Please click on File in the top navigation bar, and then Download as to see many options of download formats (PDF, HTML, Python, LaTeX). Please select HTML (. html) .


1 Answers

I found what I wanted thanks to that blog which does exactly what I wanted.

I modified it a bit to make it work with ipython 2.1 [edit: works aslo with Jupyter], and mixed the input and output hidding tricks.

What it does:

When opening the html file, all input will be shown and output hidden. By clicking on the input field it will show the output field. And once you have both fields, you can hide one by clicking the other.

edit: It now hides long input, and about 1 line is always shown (by defa. You can show everything by clicking on the input number. This is convenient when you don't have output (like a definition of a long function you'd like to hide in your HTML doc)

You need to add a template while doing nbconvert :

ipython nbconvert --template toggle my_notebook.ipynb

where toggle is a file containing :

{%- extends 'full.tpl' -%}

{% block output_group %}
<div class="output_hidden">
{{ super() }}
</div>
{% endblock output_group %}

{% block input_group -%}
<div class="input_hidden">
{{ super() }}
</div>
{% endblock input_group %}

{%- block input -%}
<div class="in_container">
<div class="in_hidden">
{{ super() }}
<div class="gradient">
</div>
</div>
</div>
{%- endblock input -%}


{%- block header -%}
{{ super() }}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
div.output_wrapper {
  margin-top: 0px;
}
.output_hidden {
  display: block;
  margin-top: 5px;
}
.in_hidden {
   width: 100%;
   overflow: hidden;
   position: relative;
}

.in_container {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
}

.gradient {
    width:100%;
    height:3px;  
    background:#eeeeee;
    position:absolute;
    bottom:0px;
    left:0;
    display: none;
    opacity: 0.4;
    border-bottom: 2px dashed #000;
}
div.input_prompt {
    color: #178CE3;
    font-weight: bold;
}
div.output_prompt {
    color: rgba(249, 33, 33, 1);
    font-weight: bold;
}
</style>

<script>
$(document).ready(function(){
  $(".output_hidden").click(function(){
      $(this).prev('.input_hidden').slideToggle();
  });
  $(".input_hidden").click(function(){
      $(this).next('.output_hidden').slideToggle();
  });
var slideHeight = 25;
$(".in_container").each(function () {
    var $this = $(this);
    var $in_hidden = $this.children(".in_hidden");
    var defHeight = $in_hidden.height();
    if (defHeight >= 61) {
        var $prompt = $this.prev(".input_prompt");
        var $gradient = $in_hidden.children(".gradient");
        $in_hidden.css("height", slideHeight + "px");
        $gradient.css("display", "block");
        $prompt.click(function () {
            var curHeight = $in_hidden.height();
            if (curHeight == slideHeight) {
                $in_hidden.animate({
                    height: defHeight
                }, "normal");
                $gradient.fadeOut();
            } 
            else {
                $in_hidden.animate({
                    height: slideHeight
                }, "normal");
                $gradient.fadeIn();
            }
            return false;
        });
    }
});
});

</script>
{%- endblock header -%}

Basically, you can inject whatever javascript and css you want to customize your notebook at will!

Have fun !

like image 177
jrjc Avatar answered Oct 18 '22 23:10

jrjc