Como ocultar o código das células no notebook ipython visualizado com o nbviewer?

Eu tenho um notebook ipython / jupyter que visualizo usando o NBviewer.

Como ocultar todo o código do notebook renderizado pelo NBviewer, para que apenas a saída do código (por exemplo, gráficos e tabelas) e as células de marcação sejam exibidas?

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

Agora isso é possível diretamente do nbconvert a partir da versão 5.2.1 : o conteúdo pode ser filtrado usando as opções de exclusão do exportador de modelo interno . Por exemplo:

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

excluirá as células "código de entrada", ou seja, o próprio código. Existem opções semelhantes para excluir prompts, células de marcação ou saídas, ou ambas, entradas e saídas.

(Essas opções devem funcionar independentemente do formato de saída.)

Eu usaria a hide_input_allpartir de nbextensions ( https://github.com/ipython-contrib/IPython-notebook-extensions ). Aqui está como:

1. Descubra onde está o seu diretório IPython:

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

2. Faça o download de nbextensions e mova-o para o diretório IPython.

3. Edite seu arquivo custom.js em algum lugar do diretório IPython (o meu estava em profile_default / static / custom ) para ser semelhante ao custom.example.js no diretório nbextensions .

4. Adicione esta linha ao custom.js :

   IPython.load_extensions('usability/hide_input_all')

O IPython Notebook agora terá um botão para alternar as células de código, independentemente da pasta de trabalho.

A versão mais recente do notebook IPython não permite mais a execução de javascript nas células de remarcação; portanto, adicionar uma nova célula de remarcação com o seguinte código javascript não funcionará mais para ocultar suas células de código (consulte este link )

Altere ~ / .ipython / profile_default / static / custom / custom.js conforme abaixo:

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

Eu escrevi um código que realiza isso e adiciona um botão para alternar a visibilidade do código.

O seguinte está em uma célula de código na parte superior de um 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)

Você pode ver um exemplo de como isso fica no NBviewer aqui .

Atualização: Isso terá algum comportamento engraçado com as células Markdown no Jupyter, mas funciona bem na versão de exportação HTML do notebook.

Existe uma boa solução fornecida aqui que funciona bem para notebooks exportados para HTML. O site ainda tem links para este post da SO, mas não vejo a solução de Chris aqui! (Chris, onde você está?)

Essa é basicamente a mesma solução que a resposta aceita do harshil, mas tem a vantagem de ocultar o próprio código de alternância no HTML exportado. Também gosto que essa abordagem evite a necessidade da função HTML IPython.

Para implementar esta solução, adicione o seguinte código a uma célula 'Raw NBConvert' na parte superior do seu 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>

Em seguida, basta exportar o notebook para HTML. Haverá um botão de alternância na parte superior do notebook para mostrar ou ocultar o código.

Chris também fornece um exemplo aqui .

Posso verificar se isso funciona no Jupyter 5.0.0

Atualização : Também é conveniente mostrar / ocultar os div.promptelementos junto com os div.inputelementos. Isso remove o In [##]:e Out: [##]texto e reduz as margens do lado esquerdo.

Isso pode ser feito usando um ToggleButtonwidget IPython e um pouco de JavaScript. O código a seguir deve ser colocado em uma célula de código na parte superior do 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)

Isso cria o seguinte botão para alternar entre mostrar / ocultar o código para o Jupyter Notebook, padronizado com o estado "ocultar":

Quando definido para o estado "show", você pode ver o código do Notebook Jupyter:

Além disso, embora muito desse código deva ser colocado no início do Notebook, o local do botão de alternância é opcional. Pessoalmente, prefiro mantê-lo na parte inferior do documento. Para fazer isso, basta mover a display(button)linha para uma célula de código separada na parte inferior da página:

Para uma melhor exibição com um documento impresso ou um relatório, também precisamos remover o botão e a capacidade de mostrar ou ocultar certos blocos de código. Aqui está o que eu uso (basta copiar e colar isso na sua primeira célula):

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

Então, nas suas próximas células:

hide_me
print "this code will be hidden"

e

print "this code will be shown"

Isso renderizará uma saída do notebook IPython. No entanto, você poderá visualizar o código de entrada. Você pode copiar um bloco de anotações e adicionar esse código, se necessário, para compartilhar com alguém que não precisa visualizá-lo.

from IPython.display import HTML

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

Converta a célula em Markdown e use a <details>tag HTML5 como no exemplo 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>

Aqui está outra solução sugerida pelo p3trus :

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

Conforme descrito por p3trus : "[It] adiciona um botão à barra de ferramentas do notebook ipython para ocultar / mostrar a célula do código de entrada. Para usá-lo, você deve colocar o arquivo custom.js em sua .ipython_<profile name>/static/custom/pasta, onde é o perfil do ipython em uso. "

Meus próprios comentários: verifiquei esta solução e funciona com o iPython 3.1.0.

A solução aceita também funciona em julia Jupyter / IJulia com as seguintes modificações:

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

observe em particular:

• use a displayfunção
• escapar do $sinal (visto como uma variável)

Aqui está um bom artigo (o mesmo que o @Ken postou) sobre como aperfeiçoar os notebooks Jpuyter (o novo IPython) para apresentação. Existem inúmeras maneiras de estender o Jupyter usando JS, HTML e CSS, incluindo a capacidade de se comunicar com o kernel python do notebook a partir de javascript. Existem decoradores mágicos para %%HTMLe, %%javascriptportanto, você pode fazer algo assim em uma célula sozinha:

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

Também posso garantir que os métodos de Chris funcionam no jupyter 4.XX

Solução muito fácil usando o console do navegador. Você copia isso no console do navegador e pressiona enter:

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

Em seguida, você alterna o código da célula simplesmente clicando no número de entrada da célula.

(Papel) Imprimindo ou salvando como HTML

Para aqueles que desejam imprimir em papel, as respostas acima, por si só, parecem não fornecer uma boa saída final. No entanto, pegar o código de @Max Masnick e adicionar o seguinte permite imprimi-lo em uma página 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))

O motivo do recuo é que a seção de prompt removida por Max Masnick significa que tudo muda para a esquerda na saída. No entanto, isso não fez nada para a largura máxima da saída que estava restrita max-width:100%-14ex;. Isso altera a largura máxima da sub-área de saída para max-width:100%;.

Com todas as soluções acima, mesmo que você esteja ocultando o código, você ainda terá a [<matplotlib.lines.Line2D at 0x128514278>]porcaria acima do valor que provavelmente não deseja.

Se você realmente deseja se livrar da entrada em vez de apenas escondê-la, acho que a solução mais limpa é salvar suas figuras em disco em células ocultas e incluir apenas as imagens nas células Markdown usando, por exemplo ![Caption](figure1.png).

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

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