Pregunta ¿Cómo ocultar el código de las celdas en el cuaderno ipython visualizado con nbviewer?


Tengo un cuaderno ipython / jupyter que visualizo usando NBviewer.

¿Cómo puedo ocultar todo el código del bloc de notas prestado por NBviewer, de modo que solo se muestre el resultado del código (por ejemplo, gráficos y tablas) y las celdas de reducción?


76
2018-01-14 02:25


origen


Respuestas:


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

134
2018-01-21 17:24



yo usaría hide_input_all de nbextensions (https://github.com/ipython-contrib/IPython-notebook-extensions) Así es cómo:

  1. Averigüe dónde está su directorio IPython:

    from IPython.utils.path import get_ipython_dir
    print get_ipython_dir()
    
  2. Descargar nbextensions y moverlo al directorio IPython.

  3. Edita tu custom.js archivo en algún lugar del directorio IPython (el mío estaba en profile_default / static / custom) ser similar al custom.example.js en el nbextensions directorio.

  4. Agregue esta línea a custom.js:

    IPython.load_extensions('usability/hide_input_all')
    

IPython Notebook ahora tendrá un botón para alternar celdas de código, sin importar el libro de trabajo.


14
2017-07-16 18:11



La versión más reciente del notebook IPython ya no permite ejecutar javascript en las celdas de marcado, por lo que agregar una nueva celda de marcado con el siguiente código de javascript ya no funcionará para ocultar sus celdas de código (consulte este enlace)

Cambie ~ / .ipython / profile_default / static / custom / custom.js como a continuación:

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

13
2018-04-20 03:04



Escribí un código que logra esto y agrego un botón para alternar la visibilidad del código.

Lo siguiente va en una celda de código en la parte superior de un cuaderno:

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)

Puedes ver un ejemplo de cómo se ve esto en NBviewer aquí.

Actualizar: Esto tendrá un comportamiento extraño con las celdas Markdown en Jupyter, pero funciona bien en la versión HTML de exportación del portátil.


6
2017-07-15 15:40



Para una mejor visualización con un documento impreso o un informe, también debemos eliminar el botón y la capacidad de mostrar u ocultar ciertos bloques de código. Esto es lo que uso (simplemente copie y pegue esto a su primera celda):

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

Luego en tus próximas celdas:

hide_me
print "this code will be hidden"

y

print "this code will be shown"

4
2017-08-05 17:53



Hay una buena solución provista aquí que funciona bien para portátiles exportados a HTML. El sitio web incluso enlaza aquí con esta publicación SO, ¡pero no veo la solución de Chris aquí! (Chris, ¿dónde estás?)

Esta es básicamente la misma solución que la respuesta aceptada de harshil, pero tiene la ventaja de ocultar el código de alternar en el HTML exportado. También me gusta que este enfoque evite la necesidad de la función HTML de IPython.

Para implementar esta solución, agregue el siguiente código a una celda 'Raw NBConvert' en la parte superior de su computadora portátil:

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

Luego simplemente exporte el cuaderno a HTML. Habrá un botón de alternar en la parte superior del portátil para mostrar u ocultar el código.

Chris también proporciona un ejemplo aquí.

Puedo verificar que esto funciona en Jupyter 5.0.0

Actualizar: También es conveniente mostrar / ocultar el div.prompt elementos junto con el div.input elementos. Esto elimina el In [##]: y Out: [##] texto y reduce los márgenes de la izquierda.


4
2017-10-30 14:29



Use los Runtools que amplían el cuaderno básico de iPython:

https://github.com/ipython-contrib/IPython-notebook-extensions/wiki/Runtools


2
2018-01-14 16:39



Esto generará una salida de cuaderno IPython. Sin embargo, notará que puede ver el código de entrada. Puede copiar un cuaderno, luego agregue este código si es necesario para compartir con alguien que no necesita ver el código.

from IPython.display import HTML

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

2
2017-12-10 01:47



Aquí hay otra solución sugerida por p3trus:

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

Según lo descrito por p3trus: "[Se] agrega un botón a la barra de herramientas del portátil ipython para ocultar / mostrar la celda del código de entrada. Para usarlo, debe colocar el archivo custom.js en su .ipython_<profile name>/static/custom/ carpeta, donde  es el perfil de ipython en uso ".

Mis propios comentarios: verifiqué esta solución y funciona con iPython 3.1.0.


1
2018-05-04 00:54



(Papel) Imprimir o guardar como HTML

Para aquellos de ustedes que desean imprimir en papel las salidas, las respuestas anteriores por sí solas no parecen dar un buen resultado final. Sin embargo, tomar el código de @Max Masnick y agregar lo siguiente le permite a uno imprimirlo en una 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))

El motivo de la sangría es que la sección de solicitud eliminada por Max Masnick significa que todo se desplaza hacia la izquierda en la salida. Sin embargo, esto no hizo nada para el ancho máximo de la salida que estaba restringido a max-width:100%-14ex;. Esto cambia el ancho máximo de output_subarea a max-width:100%;.


0
2017-12-02 12:54