So konvertieren Sie ein Ipython-Notebook in HTML mit reduzierter Ausgabe (und/oder Eingabe)

Question

ich habe ein ipython notebook Ich möchte es mit Kollegen teilen, die ipython möglicherweise nicht installiert haben.

Also habe ich es in HTML konvertiert mit:

ipython nbconvert my_notebook.ipynb

Aber mein Problem ist, dass ich sehr lange Ausgaben habe, die das Lesen erschweren, und ich würde gerne wissen, ob es möglich ist, die Option zum Reduzieren oder Scrollen des Notebook-Viewers in der HTML-Version zu haben.

Im Grunde hätte ich folgendes: Ausgabebeispiel

Aber in der HTML-Version.Ist das überhaupt möglich?

Danke fürs Helfen !

Answer 1

Dadurch habe ich gefunden, was ich wollte Blog Das macht genau das, was ich wollte.

Ich habe es ein wenig modifiziert, damit es mit ipython 2.1 funktioniert [Bearbeiten:Funktioniert auch mit Jupyter] und hat die Tricks zum Verstecken von Eingaben und Ausgaben gemischt.

Was es macht:

Beim Öffnen der HTML-Datei werden alle Eingaben angezeigt und die Ausgaben ausgeblendet.Durch Klicken auf das Eingabefeld wird das Ausgabefeld angezeigt.Und sobald Sie beide Felder haben, können Sie eines ausblenden, indem Sie auf das andere klicken.

bearbeiten:Es verbirgt jetzt lange Eingaben und es wird immer etwa eine Zeile angezeigt (von defa.Sie können alles anzeigen, indem Sie auf die eingegebene Nummer klicken.Dies ist praktisch, wenn Sie keine Ausgabe haben (z. B. eine Definition einer langen Funktion, die Sie in Ihrem HTML-Dokument ausblenden möchten).

Sie müssen beim Ausführen von nbconvert eine Vorlage hinzufügen:

ipython nbconvert --template toggle my_notebook.ipynb

wobei toggle eine Datei ist, die Folgendes enthält:

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

Grundsätzlich können Sie jedes beliebige Javascript und CSS einfügen, um Ihr Notizbuch nach Belieben anzupassen!

Viel Spaß !

Answer 2

ipython 2.0 enthält jetzt Speichern in HTML direkt innerhalb des Notebooks.

Die Scrolling-Balken wurden automatisch mit Zeilen> 100 in einer älteren Version erstellt. docs Wenn sie noch zeigen, sollte Ihre HTML-Leistung auch dieBars, nein?

Answer 3

Sie können den untenstehenden Code verwenden, um Ihr Notebook mit dem Code mit Code in HTML zu konvertieren.

generasacodicetagpre.