¿Cómo aumento el ancho de celda del cuaderno Jupyter / ipython en mi navegador?


350

Me gustaría aumentar el ancho del cuaderno de ipython en mi navegador. Tengo una pantalla de alta resolución y me gustaría ampliar el ancho / tamaño de la celda para aprovechar este espacio adicional.

¡Gracias!


editar: 5/2017

Ahora uso jupyterthemes: https://github.com/dunovank/jupyter-themes

y este comando:

jt -t oceans16 -f roboto -fs 12 -cellw 100%

que establece el ancho al 100% con un buen tema.


1
Pruebe np.set_printoptions (250)
vgoklani el

2
¡Gracias! np.set_printoptions(linewidth=110)funciona para mi.
Timo

1
@vgoklani Lo siento, pero 'np'? De donde viene eso?
Brandt

1
Importación de @Brandt numpy como np
vgoklani

3
@vgoklani +1 para Jupyter Themes
Gursharan Singh

Respuestas:


615

Si no desea cambiar su configuración predeterminada y solo desea cambiar el ancho del cuaderno actual en el que está trabajando, puede ingresar lo siguiente en una celda:

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))

11
Agradable. Parece que solo cambia el código / las celdas de rebajas. ¿Hay alguna manera de hacer que también haga las celdas de salida?
dreyco676

13
¡Esta solución funcionó para mí! No tuve que instalar ninguna lib o paquete para usarlo.
Bill Ancalagon el negro

1
Estoy usando Jupyter para Julia. ¿Sabes lo que necesito en este caso?
Becko

68
Esto ha cambiado mi vida
YellowPillow

1
@becko según el discurso de julia esto funciona:display("text/html", "<style>.container { width:100% !important; }</style>")
Liso

209

Esa div.cellsolución en realidad no funcionó en mi IPython, sin embargo, afortunadamente, alguien sugirió una solución de trabajo para los nuevos IPythons:

Cree un archivo ~/.ipython/profile_default/static/custom/custom.css(iPython) o ~/.jupyter/custom/custom.css(Jupyter) con contenido

.container { width:100% !important; }

Luego reinicie los portátiles iPython / Jupyter. Tenga en cuenta que esto afectará a todos los portátiles.


55
Estos pequeños fragmentos de información deben publicarse en algún lugar, ¡gracias de nuevo!
vgoklani

44
Esto fue extremadamente útil
ivrin

13
La ubicación de la carpeta personalizada de inicio de IPython 4.1 ha cambiado a ~/.jupyter/custom/.
Romain

66
Tuve que reiniciar el cuaderno Jupyter (4.1.0) para que funcione. Puse el css anterior en~/.jupyter/custom/custom.css
Paul

66
100% no se ve muy bien, lo cambié a 90%
liang

69

Para que esto funcione con jupyter (versión 4.0.6) que creé ~/.jupyter/custom/custom.csscontiene:

/* Make the notebook cells take almost all available width */
.container {
    width: 99% !important;
}   

/* Prevent the edit cell highlight box from getting clipped;
 * important so that it also works when cell is in edit mode*/
div.cell.selected {
    border-left-width: 1px !important;
}

Esto funciona en Linux! Pero, ¿dónde necesito guardarlo en Windows?
crusaderky

66
Intente ejecutar jupyter --config-dir, luego cree custom\custom.cssen cualquier ubicación que devuelva el comando.
jvd10

@ jvd10 esto no funcionó para mí. ¿ custom.cssTiene algún otro código además del fragmento anterior? Además, ¿cómo sabe Jupyter usarlo?
mLstudent33

Al menos en Linux y OSX, por defecto, Jupyter busca un directorio oculto llamado .jupyterarchivos de configuración que incluyen personalizaciones como las anteriores. Lo anterior debe ser el único contenido de custom.css. Vea aquí más información: jupyter.readthedocs.io/en/latest/projects/…
jvd10

24

Es hora de usar jupyterlab

Finalmente, una actualización muy necesaria ha llegado a los portátiles. Por defecto, usa el ancho completo de su ventana como cualquier otro IDE nativo completo.

Todo lo que tienes que hacer es:

pip install jupyterlab
# if you use conda
conda install -c conda-forge jupyterlab
# to run 
jupyter lab    # instead of jupyter notebook

Aquí hay una captura de pantalla de blog.Jupyter.org


2
JupyterLab todavía está en beta y tiene algunas regresiones de los cuadernos regulares (por diseño). Una notable es la prohibición de JS por defecto y la necesidad de extensiones para cada pequeña visualización de JS
Ciprian Tomoiagă

1
¿Y cómo puedes cambiar el ancho de una celda de Jupyter Lab?
multigoodverse

1
He luchado durante una hora para que Jupyter Lab funcione. al principio no se mostraban gráficos (pyplot / plotly). Los documentos no mencionan que debe instalar extensiones para eso. Intenté instalar la extensión de plotly. descubrí que necesitas nodejs para eso. instalado ambos, ahora recibo el mensaje "No se puede encontrar la plantilla:" index.html "". En este punto me di por vencido, me quedo con el cuaderno jupyter.
Itamar Katz

15

Lo que hago generalmente después de una nueva instalación es modificar el archivo css principal donde se almacenan todos los estilos visuales. Yo uso Miniconda pero la ubicación es similar a otrasC:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

Con algunas pantallas, estas resoluciones son diferentes y superiores a 1. Para estar seguro, cambio todo al 98%, por lo que si me desconecto de mis pantallas externas en mi computadora portátil, todavía tengo un ancho de pantalla del 98%.

Luego, simplemente reemplace 1140 px con el 98% del ancho de la pantalla.

@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

ingrese la descripción de la imagen aquí

Después de editar

@media (min-width: 1200px) {
  .container {
    width: 98%;
  }
}

ingrese la descripción de la imagen aquí Guarde y reinicie su computadora portátil


Actualizar

Recientemente tuve que ampliar las celdas de Jupyter en un entorno en el que está instalado, lo que me llevó a volver aquí y recordarme.

Si necesita hacerlo en un entorno virtual, instaló jupyter. Puede encontrar el archivo CSS en este subdirectorio

env/lib/python3.6/site-packages/notebook/static/style/stye.min.css

1
¡Esto es asombroso! Es simple y logra exactamente lo que se necesita.
arbitrarystringofletters

@Gunay /notebookno existe en el directorio para mí.
mLstudent33

¿Conoces la versión de tu python (python -V cuando activas tu entorno) y cómo creaste el entorno virtual? ¿Utilizaste el módulo venv en Python / Conda?
Gunay Anach

12

Puede configurar el CSS de un cuaderno llamando a una hoja de estilo desde cualquier celda. Como ejemplo, eche un vistazo al curso de 12 Pasos para Navier Stokes .

En particular, crear un archivo que contenga

<style>
    div.cell{
        width:100%;
        margin-left:1%;
        margin-right:auto;
    }
</style>

debería darte un punto de partida. Sin embargo, puede ser necesario ajustar también, por ejemplo, div.text_cell_renderpara lidiar con las rebajas y las celdas de código.

Si ese archivo es, custom.cssentonces agregue una celda que contenga:

from IPython.core.display import HTML
def css_styling():
    styles = open("custom.css", "r").read()
    return HTML(styles)
css_styling()

Esto aplicará todos los estilos y, en particular, cambiará el ancho de la celda.


Esto no funciona en la última versión de IPython (versión> 2). Verifique esta respuesta: stackoverflow.com/a/24207353/2108548
rominf

O si solo desea cambiarlo para el cuaderno actual en ipythons y jupyter recientes, vea la respuesta de @jjinking :)
nealmcb

8

(A partir de 2018, recomendaría probar JupyterHub / JupyterLab. Utiliza todo el ancho del monitor. Si esto no es una opción, tal vez porque está utilizando uno de los proveedores de Jupyter como servicio basados ​​en la nube, sigue leyendo)

(Stylish es acusado de robar datos del usuario, en su lugar he pasado a usar el plugin Stylus)

Recomiendo usar el complemento de navegador con estilo . De esta manera, puede anular css para todos los portátiles, sin agregar ningún código a los portátiles. No nos gusta cambiar la configuración en .ipython / profile_default, ya que estamos ejecutando un servidor Jupyter compartido para todo el equipo y el ancho es una preferencia del usuario.

Hice un estilo específicamente para pantallas de alta resolución orientadas verticalmente, que hace que las celdas sean más anchas y agrega un poco de espacio vacío en la parte inferior, para que pueda colocar la última celda en el centro de la pantalla. https://userstyles.org/styles/131230/jupyter-wide Puede, por supuesto, modificar mi CSS a su gusto, si tiene un diseño diferente o no desea un espacio vacío adicional al final.

Por último, pero no menos importante, Stylish es una gran herramienta para tener en su conjunto de herramientas, ya que puede personalizar fácilmente otros sitios / herramientas a su gusto (por ejemplo, Jira, Podio, Slack, etc.)

@media (min-width: 1140px) {
  .container {
    width: 1130px;
  }
}

.end_space {
  height: 800px;
}

sí, con estilo es genial! ¿Puede agregar el código necesario para el espacio adicional en la parte inferior? Siempre tengo una celda vacía con muchas líneas en blanco para tener la última celda real centrada -_-.
Ciprian Tomoiagă

2
Stylish fue retirado ayer por robar el historial de navegación de los usuarios: gadgets.ndtv.com/internet/news/…
stason

6

Para los usuarios de Chrome, recomiendo Stylebot , que le permitirá anular cualquier CSS en cualquier página, también le permitirá buscar e instalar otros CSS personalizados para compartir. Sin embargo, para nuestro propósito no necesitamos ningún tema avanzado. Abra Stylebot, cambie a Edit CSS. Jupyter captura algunas teclas, por lo que no podrá escribir el código a continuación. Simplemente copie y pegue, o simplemente su editor:

#notebook-container.container {
    width: 90%;
}

Cambie el ancho como desee, me parece que el 90% se ve mejor que el 100%. Pero depende totalmente de tu ojo.


¡Sugerencia impresionante para el cuaderno jupyter pero hace mucho más!
Robino

@bizi, ¿hago clic dentro de una celda de código y luego hago clic derecho, selecciono Stylebot, edito CSS y copio y pego lo que tienes? Si es así, no funcionó para mí. Acabo de obtener márgenes más gordos en ambos lados.
mLstudent33

4

Este es el código que terminé usando. Extiende las celdas de entrada y salida a izquierda y derecha. Tenga en cuenta que la indicación del número de entrada / salida desaparecerá:

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))
display(HTML("<style>.output_result { max-width:100% !important; }</style>"))
display(HTML("<style>.prompt { display:none !important; }</style>"))

¡frio! Solo excluiría la última línea, ya que hace que la información de ejecución de las celdas desaparezca (las celdas dejan la parte, que muestra el orden de ejecución y un * cuando la ejecución aún no ha terminado)
onofricamila

2

Hice alguna modificación a la solución de @ jvd10. El '! Important' parece demasiado fuerte para que el contenedor no se adapte bien cuando se muestra la barra lateral de TOC. Lo eliminé y agregué 'min-width' para limitar el ancho mínimo.

Aquí está mi .juyputer / custom / custom.css:

/* Make the notebook cells take almost all available width and limit minimal width to 1110px */
.container {
    width: 99%;
    min-width: 1110px;
}   

/* Prevent the edit cell highlight box from getting clipped;
 * important so that it also works when cell is in edit mode*/
div.cell.selected {
    border-left-width: 1px;
}

0

Intenté todo y nada funcionó para mí, terminé usando mostrar mi marco de datos como HTML de la siguiente manera

from IPython.display import HTML    
HTML (pd.to_html())

-1

Para los usuarios de Firefox / Chrome, una buena manera de lograr el 100% de ancho es usar un script TamperMonkey personalizado .

Los beneficios son

  1. configure esto una vez en su navegador, no es necesario modificar la configuración del servidor.
  2. funciona con múltiples servidores jupyter.
  3. TamperMonkey es confiable, mantenido y estable.
  4. Mucha personalización adicional es posible a través de javascript.

Este script funciona para mí https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.