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


147

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?


10
Non esiste ancora un pulsante esistente per questo nell'interfaccia utente predefinita (febbraio 2016). IMHO questo è davvero molto fastidioso. Questo è nell'elenco delle funzionalità che verranno implementate: github.com/jupyter/notebook/issues/534 È fantastico. Non vedo l'ora di farlo.
stocastico il

1
Dai un'occhiata qui sotto alla risposta di Noè. Con l'inclusione di un TemplateExporter questo problema viene risolto indipendentemente dal formato di output. Al momento della stesura di Noahs, la risposta sostituisce la risposta di harshils (che era una buona soluzione per il TemplateExporter).
Michael,

Risposte:


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

5
Ha funzionato per me su iPython 3.1.0 se l'ho inserito nella cella di codice. L'ho sostituito <form action ... > ... </form>con un semplice HTML comeThe raw code for this IPython notebook is by default hidden for easier reading.To toggle on/off the raw code, click <a href="javascript:code_toggle()">here</a>.
akhmed

La ringrazio per la risposta! Vedi la mia risposta se hai bisogno di nascondere il pulsante e la possibilità di nascondere o mostrare determinati blocchi di codice come Rstudio.
jaycode

3
Grazie, questo funziona e anche con il "salvataggio in html". Consiglia di metterlo nella propria cella nella parte superiore del notebook.
Vivek Gani,

se aggiungi l'attributo accesskey = "h" all'elemento di input puoi quindi nascondere lo show con alt-h (almeno in chrome)
frankc

7
Come cambieresti in modo che non mostri nemmeno il pulsante, nasconde semplicemente il codice?
Harlekuin,

79

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


3
questa è la risposta migliore
skurp

Dove viene salvata l'esportazione .pdf per impostazione predefinita?
MyopicVisage,

Stessa cartella del notebook .ipython. Utilizzare l'argomento '--output NotebookNoCode' per rinominare il file.
MyopicVisage,

Questo dovrebbe funzionare nel notebook?
Lcrmorin,

@were_cat no, questo è un comando shell usato per esportare il file .ipynb notebook; in questo esempio, viene convertito in pdf
Noah,

19

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.


6
Ho appena provato questo: sembra aiutare a nascondere le celle di codice durante la modifica di un blocco note, anche se quando si salva il blocco note in html (ovvero il rendering in nbviewer) le celle di codice vengono comunque visualizzate.
Vivek Gani,

@VivekGani solo una breve nota che puoi tenere nascoste le celle nascoste nell'html esportato usando il modello fornito con lo stesso repository, vedi la relativa pagina del documento (vedi anche questa domanda pertinente )
glS

15

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>")
});

esattamente quello che sto cercando!
lucky1928,

Stranamente quella soluzione non ha funzionato per me poiché il menu di visualizzazione di iPython rimane invariato. (iPython 3.1.0) La tua soluzione mi ha ispirato a guardare oltre e trovare una soluzione molto simile di p3trus che ha aggiunto un pulsante anziché un menu e ha funzionato.
Akhmed

1
@akhmed Forse puoi fare riferimento a stackoverflow.com/a/29851084/1914781 . È una domanda diversa, ma è utile per te!

12

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.


3
Funziona su celle di codice, ma se hai celle di markdown fa qualcosa di strano. Mostra il markdown come markdown , quindi mostra lo stesso contenuto, ma formattato, di seguito.
Scott H,

Ho appena capito che l'unica cosa sbagliata è la specifica del nodo. Invece di '.input_area'e '.prompt', usa 'div.input'e funziona come un fascino! Quindi, per ricapitolare, sostituire jQuery("div.input").toggle();al posto di jQuery('.input_area').toggle(); jQuery('.prompt').toggle();. @ Max Masnick, potresti risolvere la tua risposta?
Scott H,

L'uso di "div.input" come selezione del nodo funziona finché non interagisci con le celle di markdown, ma ho appena capito che se interagisci con le celle di markdown potresti avere un comportamento strano. Ad esempio, se fai doppio clic su una cella di markdown, questa viene nascosta interamente. Così com'è, la mia modifica alla soluzione di Max va bene per generare HTML da condividere con altri, ma non per interagire troppo con esso.
Scott H,

Sì, quindi ho notato la stessa cosa che hai fatto con le celle di Markdown che sono state tutte sollevate. Funziona bene nell'esportazione HTML, che è dove lo uso. Modificherò la risposta per notare questo.
Max Masnick,

1
Per rimuovere il rimanente spazio a destra dalla rimozione di ".prompt" è sufficiente aggiungere questo codice alla fine del codice sopra. CSS = """#notebook div.output_subarea { max-width:100%;""" HTML('<style>{}</style>'.format(CSS)). Questo è molto utile per la stampa.
Tavolini Bobby il

10

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":

Nascondi lo stato del codice

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

Mostra lo stato del codice

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:

Pulsante di commutazione spostato


9

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.


sarebbe possibile utilizzare questo codice per nascondere selettivamente gli output con un clic di un pulsante? IE $('div.output').next().hide('500');per nascondere il prossimo output? Mi sono provato ma non riesco a farlo funzionare.
Brian Keith,

7

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"

Immagino che questo non funzioni con le versioni / python 3 più recenti?
baxx,

Funziona con jupyter versione 4.3.0 con Python versione 3.6.1.
Alma Rahat,

Grazie! Felice di poter dire che funziona anche con il notebook Jupyter 5.3.1 . Sto usando Python versione 3.6.1
Amitrajit Bose il

4

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

1
@Rocketq usa questo - from IPython.display import HTML HTML('''<script> $('div.input').show()''')
fixxxer


1

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.


1

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)

Sono confuso su come farlo funzionare. È necessaria una dichiarazione di importazione e quale tipo di casella dovrebbe essere il blocco. Uno crudo o una casella di codice?
J Spen,

1

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


1

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();
});

inserire lo script nella console del browser

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

numero di cellulare


0

(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%;.


0

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


3
Si può mettere _ = plt.plot()per non averlo fatto stampare [<>]cazzate
jonnybazookatone il

3
Posizionare un punto e virgola dopo i comandi di stampa matplotlib ha soppresso l'output indesiderato per me.
DakotaD,

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

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

6
Aggiungi una spiegazione invece di rispondere semplicemente con un comando.
Fabian Bettag,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.