Change the appearance of the Jupyter notebook using themes in .css / Cambia la apariencia del Jupyter notebook usando temas en .css

Leer en español

Jupyter Notebook, formerly IPython Notebook, is a simple interface for exploratory programming. It allows execution line by line with the addition of a great visualization of the results. It is not a development environment, if you are looking for that you can use Spyder or Pycharm, but it stands out for the ability to document our work since we can write code, HTML text or markdown, latex formulas, publish our notebooks on sites such as github.com or gitlab.com where they are rendered or even create presentations using reveal.js. There are many compatible kernels, including Python, R, Julia, Scala, C ++.

This post focuses on changing the aesthetics of Jupyter Notebooks and that the appearance of the Notebook is not very pleasant when we use it for some time.

Screenshot_20171127_223617
Default appearance of Jupyter

The custom style sheet custom.css

To use a custom .css style sheet we just need to create the custom.css file inside the /home/user/.jupyter/custom directory on Linux or C:\users\user.jupyter\custom on windows.

Using themes based on Base 16

ocean-dark
Ocean dark base 16

As a first attempt we can go to the repository https://github.com/nsonnad/base16-ipython-notebook where we can download 48 themes based on 16. We simply access https://github.com/nsonnad/base16-ipython-notebook/tree/master/ipython-3/output we select a .css file, copy its contents and paste it into our custom.css

Using jupyterthemes

Another option is to use the jupyterthemes python package available at https://github.com/dunovank/jupyter-themes

grade3_table
grade3 theme
oceans16_code_headers
ocean16 theme

In order to use this package we need to install it. We open a terminal in Linux or the cmd in Windows (if python is in the path of the system, if we have installed Anaconda we should look in the start menu “Acanconda Prompt”)

pip install jupyterthemes

After installed we can execute in the terminal or cmd the command that installs the theme

# list available themes
# onedork | grade3 | oceans16 | chesterish | monokai | solarizedl | solarizedd
jt -l

# select theme...
jt -t chesterish

# restore default theme
# NOTE: Need to delete browser cache after running jt -r
# If this doesn't work, try starting a new notebook session.
jt -r

# toggle toolbar ON and notebook name ON
jt -t grade3 -T -N

# set code font to 'Roboto Mono' 12pt
# (see monospace font table below)
jt -t onedork -f roboto -fs 12

# set code font to Fira Mono, 11.5pt
# 3digit font-sizes get converted into float (115-->11.5)
# 2digit font-sizes > 25 get converted into float (85-->8.5)
jt -t solarizedd -f fira -fs 115

# set font/font-size of markdown (text cells) and notebook (interface)
# see sans-serif & serif font tables below
jt -t oceans16 -tf merriserif -tfs 10 -nf ptsans -nfs 13

# adjust cell width (% screen width) and line height
jt -t chesterish -cellw 90% -lineh 170

# or set the cell width in pixels by leaving off the '%' sign
jt -t solarizedl -cellw 860

# fix the container-margins on the intro page (defaults to 'auto')
jt -t monokai -m 200

# adjust cursor width (in px) and make cursor red
# options: b (blue), o (orange), r (red), p (purple), g (green), x (font color)
jt -t oceans16 -cursc r -cursw 5

# choose alternate prompt layout (narrower/no numbers)
jt -t grade3 -altp

# my two go-to styles
# dark
jt -t onedork -fs 95 -altp -tfs 11 -nfs 115 -cellw 88% -T
# light
jt -t grade3 -fs 95 -altp -tfs 11 -nfs 115 -cellw 88% -T

For more information https://github.com/dunovank/jupyter-themes

My theme

I am currently using a pretty modified theme. I have taken the grade3 theme as a base with fonts: EBGaramond for the text, Lato for the interface of the Notebook and Operator for the code (operator is a paid font, as a second option I recommend FiraCode). I deleted many things from the original ccs, added part from the nteract css (https://nteract.io/) and the One Light color scheme from the Atom text editor.

screenshot_20171127_223649.png
My theme

Screenshot_20171127_223617

You can see my custom.ccs in the gist https://gist.github.com/eduardojvieira/16ce0564eca68ee0899bd513414538fb

I have also created a compressed file of my custom folder that you can extract in yours (incuding the fonts). https://drive.google.com/open?id=1ykG-NVtNwzrVPGpwnStnErqCNlK4EccA

Well, that’s it for today. I hope this material helps you.

Regards!

Español

Jupyter Notebook, anteriormente IPython Notebook, es una interfaz sencilla para la programación exploratoria. Permite la ejecución línea por línea con la adición de una gran visualización de los resultados. No es un entorno de desarrollo, si buscas eso puedes usar Spyder o Pycharm, pero destaca por la capacidad de documentar nuestro trabajo ya que podemos escribir código, texto en HTML o markdown, fórmulas de latex, publicar nuestros notebooks en sitios como github.com o gitlab.com donde son renderizados o incluso crear presentaciones usando reveal.js. Hay muchos kernels compatibles, incluidos Python, R, Julia, Scala, C ++.

Esta publicación se centra en cambiar la estética de los Notebooks de Jupyter y que la apariencia del Notebook no es muy agradable cuando lo usamos por algun tiempo.

Screenshot_20171127_223617
Mi tema

La hoja de estilo personalizada custom.css

Para usar una hoja de estilo .css personalizada solo debemos crear el archivo custom.css dentro del directorio /home/usuario/.jupyter/custom en Linux o C:\users\usuario.jupyter\custom en windows.

Usando temas basados en Base 16

ocean-dark
Ocean dark base 16

Como primer intento podemos ir al repositorio https://github.com/nsonnad/base16-ipython-notebook donde podemos descargar 48 temas basados en base 16. Simplemente accedemos a https://github.com/nsonnad/base16-ipython-notebook/tree/master/ipython-3/output seleccionamos un archivo .css, copiamos su contenido y lo pegamos en nuestro custom.css

Usando jupyterthemes

Otra opción es usar el paquete de python jupyterthemes disponible en https://github.com/dunovank/jupyter-themes

grade3_table
Tema grade3
oceans16_code_headers
Tema ocean16

Para poder usar este paquete necesitamos instalarlo. Abrimos una terminal en Linux o la cmd en Windows (si python está en el path del systema, si instalamos Anaconda debemos burcar en el menú inicio “Acanconda Prompt”)

 pip install jupyterthemes
 

Despues de instalado podemos ejecutar en la terminal o cmd el comando que instala el tema

# lista de temas disponibles
# onedork | grade3 | oceans16 | chesterish | monokai | solarizedl | solarizedd
jt -l

# instlar un tema
jt -t chesterish

# restaurar tema
jt -r

# activar barra de herramientas y nombre del notebook
jt -t grade3 -T -N

# seleccionar la fuente de código a 'Roboto Mono' 12pt
jt -t onedork -f roboto -fs 12

# seleccionar la fuente de código a Fira Mono, 11.5pt
jt -t solarizedd -f fira -fs 115

# seleccionar la fuente y tamaño de las celdas de texto y de la interface
jt -t oceans16 -tf merriserif -tfs 10 -nf ptsans -nfs 13

# ajusta el ancho del notebook al 90% de la pantalla y la altura de linea en 170%
jt -t chesterish -cellw 90% -lineh 170

# ancho del notebook en pixeles
jt -t solarizedl -cellw 860

# cursor en rojo y con ancho de 5
jt -t oceans16 -cursc r -cursw 5

Para más informacion https://github.com/dunovank/jupyter-themes

Mi tema

Actualmente utilizo un tema bastante modificado. He tomado como base el tema grade3 con fuentes EBGaramond para el texto Lato para la interfaz del Notebook y Operator para el código (operator es una fuente de pago, como segunda opci[on recomiendo FiraCode). Eliminé muchas cosas del ccs original, agregué parte del css de nteract (https://nteract.io/) y el esquema de colores One Light del editor de texto Atom.

screenshot_20171127_223649.png
Mi tema

Screenshot_20171127_223617

Mi custom .ccs lo pueden ver en el gist https://gist.github.com/eduardojvieira/16ce0564eca68ee0899bd513414538fb

Tambien he creado un archivo comprimido de mi carpeta custom que puedes extraer en la tuya. https://drive.google.com/open?id=1ykG-NVtNwzrVPGpwnStnErqCNlK4EccA

Bueno, esto es todo por hoy. Espero que este material les sea de ayuda.

Saludos!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s