Cómo convertir un cuaderno ipython a html con salida (y/o entrada) contraída

Question

Yo tengo un ipython notebook Me gustaría compartirlo con colegas que quizás no tengan instalado ipython.

Entonces lo convertí a html con:

ipython nbconvert my_notebook.ipynb

Pero mi problema es que tengo resultados muy largos que dificultan la lectura y me gustaría saber si es posible tener la opción de contraer o desplazarse del visor del cuaderno en la versión html.

Básicamente, me gustaría esto: ejemplo de salida

Pero en la versión html.¿Es esto siquiera posible?

Gracias por ayudar !

Answer 1

Encontré lo que quería gracias a eso. Blog que hace exactamente lo que quería.

Lo modifiqué un poco para que funcione con ipython 2.1 [editar:también funciona con Jupyter] y mezcló los trucos para ocultar entradas y salidas.

Que hace:

Al abrir el archivo html, se mostrarán todas las entradas y se ocultarán las salidas.Al hacer clic en el campo de entrada, se mostrará el campo de salida.Y una vez que tengas ambos campos, puedes ocultar uno haciendo clic en el otro.

editar:Ahora oculta entradas largas y siempre se muestra aproximadamente 1 línea (por defecto.Puede mostrar todo haciendo clic en el número de entrada.Esto es conveniente cuando no tiene resultados (como una definición de una función larga que le gustaría ocultar en su documento HTML)

Debes agregar una plantilla mientras haces nbconvert:

ipython nbconvert --template toggle my_notebook.ipynb

donde alternar es un archivo que contiene:

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

Básicamente, puedes inyectar cualquier javascript y css que quieras para personalizar tu portátil a voluntad.

Divertirse !

Answer 2

Ipython 2.0 ahora incluye guardar en HTML directamente dentro del cuaderno.

Las barras de desplazamiento se crearon automáticamente con líneas> 100 en una versión anterior. Documentos Si todavía se muestran, su salida html también debería tener las barras, ¿no?

Answer 3

Puede utilizar el siguiente código para convertir su cuaderno a HTML con el código contraído.

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>''')