Come nascondere il codice dalle celle del notebook ipython visualizzate con nbviewer?

Ho un notebook ipython / jupyter che visualizzo usando NBviewer.

Come posso nascondere tutto il codice dal notebook reso da NBviewer, in modo che vengano visualizzati solo l'output del codice (ad esempio grafici e tabelle) e le celle di markdown?

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

Questo è ora possibile direttamente da nbconvert a partire dalla versione 5.2.1 : il contenuto può essere filtrato utilizzando le opzioni di esclusione dell'esportatore modello integrato . Per esempio:

jupyter nbconvert --to pdf --TemplateExporter.exclude_input=True my_notebook.ipynb

escluderà le celle del "codice di input", ovvero il codice stesso. Esistono opzioni simili per escludere prompt, celle di markdown o output o entrambi input e output.

(Queste opzioni dovrebbero funzionare indipendentemente dal formato di output.)

Vorrei usare hide_input_allda nbextensions ( https://github.com/ipython-contrib/IPython-notebook-extensions ). Ecco come:

1. Scopri dove si trova la tua directory IPython:

   from IPython.utils.path import get_ipython_dir
   print get_ipython_dir()

2. Scarica nbextensions e spostalo nella directory IPython.

3. Modifica il tuo file custom.js da qualche parte nella directory IPython (il mio era in profile_default / static / custom ) per essere simile al custom.example.js nella directory nbextensions .

4. Aggiungi questa riga a custom.js :

   IPython.load_extensions('usability/hide_input_all')

IPython Notebook ora avrà un pulsante per attivare / disattivare le celle di codice, indipendentemente dalla cartella di lavoro.

La versione più recente del notebook IPython non consente più l'esecuzione di javascript nelle celle di markdown, quindi l'aggiunta di una nuova cella di markdown con il seguente codice javascript non funzionerà più per nascondere le celle di codice (fare riferimento a questo link )

Cambia ~ / .ipython / profile_default / static / custom / custom.js come di seguito:

code_show=true;
function code_toggle() {
 if (code_show){
 $('div.input').hide();
 } else {
 $('div.input').show();
 }
 code_show = !code_show
}

$([IPython.events]).on("app_initialized.NotebookApp", function () {
  $("#view_menu").append("<li id=\"toggle_toolbar\" title=\"Show/Hide code cells\"><a href=\"javascript:code_toggle()\">Toggle Code Cells</a></li>")
});

Ho scritto del codice per raggiungere questo obiettivo e aggiunge un pulsante per attivare / disattivare la visibilità del codice.

Quanto segue va inserito in una cella di codice nella parte superiore di un notebook:

from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di # Example: di.display_html('<h3>%s:</h3>' % str, raw=True)

# This line will hide code by default when the notebook is exported as HTML
di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

# This line will add a button to toggle visibility of code blocks, for use with the HTML export version
di.display_html('''<button onclick="jQuery('.input_area').toggle(); jQuery('.prompt').toggle();">Toggle code</button>''', raw=True)

Puoi vedere un esempio di come appare in NBviewer qui .

Aggiornamento: questo avrà un comportamento divertente con le celle Markdown in Jupyter, ma funziona bene nella versione di esportazione HTML del notebook.

Questo può essere fatto usando un ToggleButtonwidget IPython e un po 'di JavaScript. Il seguente codice deve essere inserito in una cella di codice nella parte superiore del documento:

import ipywidgets as widgets
from IPython.display import display, HTML

javascript_functions = {False: "hide()", True: "show()"}
button_descriptions  = {False: "Show code", True: "Hide code"}


def toggle_code(state):

    """
    Toggles the JavaScript show()/hide() function on the div.input element.
    """

    output_string = "<script>$(\"div.input\").{}</script>"
    output_args   = (javascript_functions[state],)
    output        = output_string.format(*output_args)

    display(HTML(output))


def button_action(value):

    """
    Calls the toggle_code function and updates the button description.
    """

    state = value.new

    toggle_code(state)

    value.owner.description = button_descriptions[state]


state = False
toggle_code(state)

button = widgets.ToggleButton(state, description = button_descriptions[state])
button.observe(button_action, "value")

display(button)

Questo crea il seguente pulsante per attivare / disattivare la visualizzazione / il codice del Jupyter Notebook, predefinito allo stato "nascondi":

Se impostato sullo stato "mostra", è quindi possibile visualizzare il codice per il Notebook Jupyter:

A parte questo, mentre gran parte di questo codice dovrebbe essere posizionato all'inizio del Notebook, la posizione del pulsante di attivazione / disattivazione è facoltativa. Personalmente, preferisco tenerlo in fondo al documento. Per fare ciò, sposta semplicemente la display(button)riga in una cella di codice separata nella parte inferiore della pagina:

C'è una buona soluzione fornita qui che funziona bene per i notebook esportati in HTML. Il sito web rimanda anche qui a questo post SO, ma non vedo la soluzione di Chris qui! (Chris, dove sei?)

Questa è sostanzialmente la stessa soluzione della risposta accettata da harshil, ma ha il vantaggio di nascondere il codice di attivazione / disattivazione nel codice HTML esportato. Mi piace anche che questo approccio eviti la necessità della funzione HTML di IPython.

Per implementare questa soluzione, aggiungi il seguente codice a una cella "Raw NBConvert" nella parte superiore del tuo notebook:

<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Show Code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide Code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()">
  <input type="submit" id="toggleButton" value="Show Code">
</form>

Quindi esporta semplicemente il notebook in HTML. Nella parte superiore del notebook sarà presente un pulsante di attivazione / disattivazione per mostrare o nascondere il codice.

Chris fornisce anche un esempio qui .

Posso verificare che funzioni in Jupyter 5.0.0

Aggiornamento : è anche conveniente mostrare / nascondere gli div.promptelementi insieme agli div.inputelementi. Ciò elimina la In [##]:e Out: [##]testo e riduce i margini sulla sinistra.

Per una migliore visualizzazione con documenti stampati o un report, è necessario rimuovere anche il pulsante e la possibilità di mostrare o nascondere determinati blocchi di codice. Ecco cosa uso (copia e incolla semplicemente questo nella tua prima cella):

# This is a cell to hide code snippets from displaying
# This must be at first cell!

from IPython.display import HTML

hide_me = ''
HTML('''<script>
code_show=true; 
function code_toggle() {
  if (code_show) {
    $('div.input').each(function(id) {
      el = $(this).find('.cm-variable:first');
      if (id == 0 || el.text() == 'hide_me') {
        $(this).hide();
      }
    });
    $('div.output_prompt').css('opacity', 0);
  } else {
    $('div.input').each(function(id) {
      $(this).show();
    });
    $('div.output_prompt').css('opacity', 1);
  }
  code_show = !code_show
} 
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input style="opacity:0" type="submit" value="Click here to toggle on/off the raw code."></form>''')

Quindi nelle tue prossime celle:

hide_me
print "this code will be hidden"

e

print "this code will be shown"

Ciò renderà un output del notebook IPython. Tuttavia, noterai che potrai visualizzare il codice di input. È possibile copiare un blocco note, quindi aggiungere questo codice se necessario per condividerlo con qualcuno che non ha bisogno di visualizzare il codice.

from IPython.display import HTML

HTML('''<script> $('div .input').hide()''')

Converti la cella in Markdown e usa il <details>tag HTML5 come nell'esempio di joyrexus:

https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f

## collapsible markdown?

<details><summary>CLICK ME</summary>
<p>

#### yes, even hidden code blocks!

```python
print("hello world!")
```

</p>
</details>

Ecco un'altra soluzione suggerita da p3trus :

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    IPython.toolbar.add_buttons_group([
        {
             'label'   : 'toggle input cells',
             'icon'    : 'icon-refresh', 
             'callback': function(){$('.input').slideToggle()}
        }
    ]);
});

Come descritto da p3trus : "[It] aggiunge un pulsante alla barra degli strumenti del notebook ipython per nascondere / mostrare la cella del codice di input. Per usarlo, devi inserire il file custom.js nella tua .ipython_<profile name>/static/custom/cartella, dove è il profilo ipython in uso. "

I miei commenti: ho verificato questa soluzione e funziona con iPython 3.1.0.

La soluzione accettata funziona anche in julia Jupyter / IJulia con le seguenti modifiche:

display("text/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>""")

notare in particolare:

• usa la displayfunzione
• sfuggire al $segno (altrimenti visto come una variabile)

Ecco un bell'articolo (lo stesso pubblicato su @Ken) su come lucidare i notebook Jpuyter (il nuovo IPython) per la presentazione. Esistono innumerevoli modi per estendere Jupyter usando JS, HTML e CSS, inclusa la possibilità di comunicare con il kernel python del notebook da javascript. Ci sono decoratori magici per %%HTMLe %%javascriptquindi puoi fare qualcosa di simile in una cella da solo:

%%HTML
<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Show Code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide Code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()"><input type="submit" id="toggleButton" value="Show Code"></form>

Posso anche confermare che i metodi di Chris funzionano in jupyter 4.XX

Soluzione molto semplice utilizzando la console del browser. Lo copi nella console del tuo browser e premi invio:

$("div.input div.prompt_container").on('click', function(e){
    $($(e.target).closest('div.input').find('div.input_area')[0]).toggle();
});

Quindi si attiva / disattiva il codice della cella semplicemente facendo clic sul numero di input della cella.

(Carta) Stampa o salvataggio come HTML

Per quelli di voi che desiderano stampare su carta, le sole risposte di cui sopra sembrano non dare un risultato finale piacevole. Tuttavia, prendendo il codice di @Max Masnick e aggiungendo quanto segue è possibile stamparlo su una pagina A4 completa.

from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di

di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

CSS = """#notebook div.output_subarea {max-width:100%;}""" #changes output_subarea width to 100% (from 100% - 14ex)
HTML('<style>{}</style>'.format(CSS))

Il motivo del rientro è che la sezione prompt rimossa da Max Masnick significa che tutto si sposta verso sinistra in uscita. Ciò tuttavia non ha fatto nulla per la larghezza massima dell'output a cui era limitato max-width:100%-14ex;. Ciò modifica la larghezza massima di output_subarea in max-width:100%;.

Con tutte le soluzioni sopra, anche se stai nascondendo il codice, otterrai comunque la [<matplotlib.lines.Line2D at 0x128514278>]merda sopra la tua figura che probabilmente non vuoi.

Se vuoi davvero sbarazzarti dell'input piuttosto che nasconderlo, penso che la soluzione più pulita sia salvare le tue figure su disco in celle nascoste e quindi includere semplicemente le immagini nelle celle di Markdown usando ad es ![Caption](figure1.png).

jupyter nbconvert testing.ipynb --to html --no-input

jupyter nbconvert yourNotebook.ipynb --no-input --no-prompt