Cómo convertir un cuaderno ipython a html con salida (y/o entrada) contraída
-
26-12-2019 - |
Pregunta
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 !
Solución
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 !
Otros consejos
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?
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>''')