Comment convertir un notebook ipython en HTML avec une sortie (et/ou une entrée) réduite

Question

j'ai un ipython notebook J'aimerais partager avec des collègues qui n'ont peut-être pas installé ipython.

Je l'ai donc converti en html avec :

ipython nbconvert my_notebook.ipynb

Mais mon problème est que j'ai des sorties très longues qui rendent la lecture difficile, et j'aimerais savoir s'il est possible d'avoir l'option de réduction ou de défilement du visualiseur de notebook sur la version html.

En gros, j'aimerais ça : exemple de sortie

Mais dans la version HTML.Est-ce seulement possible ?

Merci pour ton aide !

Answer 1

J'ai trouvé ce que je voulais grâce à ça Blog ce qui fait exactement ce que je voulais.

Je l'ai un peu modifié pour le faire fonctionner avec ipython 2.1 [modifier :fonctionne également avec Jupyter], et a mélangé les astuces de masquage d'entrée et de sortie.

Ce qu'il fait:

Lors de l'ouverture du fichier HTML, toutes les entrées seront affichées et les sorties masquées.En cliquant sur le champ de saisie, le champ de sortie s'affichera.Et une fois que vous avez les deux champs, vous pouvez en masquer un en cliquant sur l’autre.

modifier:Il masque désormais les entrées longues et environ 1 ligne est toujours affichée (par défaut.Vous pouvez tout afficher en cliquant sur le numéro saisi.C'est pratique lorsque vous n'avez pas de résultat (comme la définition d'une fonction longue que vous souhaiteriez masquer dans votre document HTML)

Vous devez ajouter un modèle en faisant nbconvert :

ipython nbconvert --template toggle my_notebook.ipynb

où toggle est un fichier contenant :

{%- 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 -%}

Fondamentalement, vous pouvez injecter le javascript et le css que vous souhaitez pour personnaliser votre notebook à volonté !

Amusez-vous !

Answer 2

Ipython 2.0 inclut désormais l'enregistrement au format HTML directement dans le bloc-notes.

Les barres de défilement étaient automatiquement créées avec des lignes > 100 dans une ancienne version. Documents S'ils s'affichent toujours, votre sortie HTML devrait également contenir des barres, non ?

Answer 3

Vous pouvez utiliser le code ci-dessous pour convertir votre bloc-notes en HTML avec le code réduit.

from IPython.display import HTML

HTML('''<script>
code_show=true; 
function code_toggle() {
 if (code_show){
 $('div.input').hide();
 } else {
 $('div.input').show();
 }
 code_show = !code_show
} 
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input type="submit" value="Click here to toggle on/off the raw code."></form>''')