-
Notifications
You must be signed in to change notification settings - Fork 514
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
756a487
commit 5e783fd
Showing
8 changed files
with
114 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,64 +1,12 @@ | ||
## Mejora `jupyter` notebook y chequeo | ||
|
||
### CSS personalizado | ||
## Mejora `jupyter` notebook | ||
|
||
Mejora la visualización del [elemento `details` para revelación de información](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) en tus notebooks. | ||
|
||
Abre `custom/custom.css` en el directorio config: | ||
```bash | ||
cd $(jupyter --config-dir) | ||
mkdir -p custom | ||
touch custom/custom.css | ||
<CODE_EDITOR_CMD> custom/custom.css | ||
``` | ||
Edita `custom.css` con la siguiente información: | ||
|
||
```css | ||
summary { | ||
cursor: pointer; | ||
display:list-item; | ||
} | ||
summary::marker { | ||
font-size: 1em; | ||
} | ||
``` | ||
|
||
Puedes cerrar <CODE_EDITOR>. | ||
|
||
### Chequeo de `jupyter` | ||
|
||
Reinicia tu terminal: | ||
|
||
```bash | ||
exec zsh | ||
``` | ||
|
||
Ahora verifica que puedas iniciar un servidor de notebook en tu máquina: | ||
Ejecuta las siguientes líneas para crear una hoja de estilos `custom.css` en tu directorio de configuración de Jupyter: | ||
|
||
```bash | ||
jupyter notebook | ||
LOCATION=$(jupyter --config-dir)/custom | ||
SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css | ||
mkdir -p $LOCATION | ||
curl $SOURCE > $LOCATION/custom.css | ||
``` | ||
|
||
Tu navegador web debería abrir en una ventana `jupyter`: | ||
|
||
 | ||
|
||
Haz clic en `New`: | ||
|
||
 | ||
|
||
Debería abrirse una pestaña en un nuevo notebook: | ||
|
||
 | ||
|
||
### Chequeo de `nbextensions` | ||
|
||
Haz una revisión de las `jupyter notebooks nbextensions`. Haz clic en `Nbextensions`: | ||
|
||
 | ||
|
||
Deselecciona _"disable configuration for nbextensions without explicit compatibility"_. Esto significa deshabilitar la configuración de nbextensions sin compatibilidad explícita. Luego verifica que _al menos_ las `nbextensions` marcadas en rojo estén habilitadas: | ||
|
||
 | ||
|
||
Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,12 @@ | ||
## `jupyter` notebook tweaking and check up | ||
## `jupyter` notebook tweaking | ||
|
||
### Custom CSS | ||
Let's improve the display of the [`details` disclosure elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) in your notebooks. | ||
|
||
Improve the display of the [`details` disclosure elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) in your notebooks. | ||
Run the following lines to create a `custom.css` stylesheet in your Jupyter config directory: | ||
|
||
Open `custom/custom.css` in the config directory: | ||
```bash | ||
cd $(jupyter --config-dir) | ||
mkdir -p custom | ||
touch custom/custom.css | ||
<CODE_EDITOR_CMD> custom/custom.css | ||
LOCATION=$(jupyter --config-dir)/custom | ||
SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css | ||
mkdir -p $LOCATION | ||
curl $SOURCE > $LOCATION/custom.css | ||
``` | ||
Edit `custom.css` with: | ||
|
||
```css | ||
summary { | ||
cursor: pointer; | ||
display:list-item; | ||
} | ||
summary::marker { | ||
font-size: 1em; | ||
} | ||
``` | ||
|
||
You can close <CODE_EDITOR>. | ||
|
||
### `jupyter` check up | ||
|
||
Let's reset your terminal: | ||
|
||
```bash | ||
exec zsh | ||
``` | ||
|
||
Now, check you can launch a notebook server on your machine: | ||
|
||
```bash | ||
jupyter notebook | ||
``` | ||
|
||
Your web browser should open on a `jupyter` window: | ||
|
||
 | ||
|
||
Click on `New`: | ||
|
||
 | ||
|
||
A tab should open on a new notebook: | ||
|
||
 | ||
|
||
You can close your web browser then terminate the jupyter server with `CTRL` + `C`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
/* Custom CSS for Jupyter Notebook | ||
Should go into ~/.jupyter/custom/custom.css | ||
Only impacts the Jupyter Notebook interface, not VS Code for example | ||
*/ | ||
|
||
|
||
/* Prettify disclosure elements used for hints and solutions | ||
- Use same color as cell editor background | ||
- Add padding and margin to make it look like a card | ||
- Make the summary element bold | ||
- Add a marker to the summary element | ||
*/ | ||
|
||
details { | ||
padding: 5px 10px 5px; | ||
margin-bottom: 1em; | ||
} | ||
|
||
details[open]{ | ||
} | ||
|
||
body[data-jp-theme-light=true] details { | ||
background-color: var(--jp-cell-editor-background); | ||
} | ||
|
||
body[data-jp-theme-light=false] details { | ||
background-color: var(--jp-cell-editor-background); | ||
} | ||
|
||
summary { | ||
cursor: pointer; | ||
display: list-item; | ||
font-weight: bold; | ||
background-color: var(--jp-cell-editor-background); | ||
} | ||
|
||
summary::marker { | ||
font-size: 1em; | ||
} | ||
|
||
details > p { | ||
margin-top: 5px !important; | ||
margin-bottom: 0 !important; | ||
} | ||
|
||
/* Reference for future use | ||
*/ | ||
|
||
body[data-jp-theme-light=true] .jp-InputArea-editor { | ||
/* To change code and markdown input cells in light mode */ | ||
} | ||
|
||
body[data-jp-theme-light=false] .jp-InputArea-editor { | ||
/* To change code and markdown input cells in dark mode */ | ||
} |