Comment puis-je augmenter la largeur des cellules du bloc-notes Jupyter / ipython dans mon navigateur?


350

Je voudrais augmenter la largeur du bloc-notes ipython dans mon navigateur. J'ai un écran haute résolution, et je voudrais étendre la largeur / taille des cellules pour utiliser cet espace supplémentaire.

Merci!


modifier: 5/2017

J'utilise maintenant jupyterthemes: https://github.com/dunovank/jupyter-themes

et cette commande:

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

ce qui définit la largeur à 100% avec un joli thème.


1
Essayez np.set_printoptions (250)
vgoklani

2
Merci! np.set_printoptions(linewidth=110)travaille pour moi.
Timo

1
@vgoklani Désolé, mais 'np'? D'où cela vient-il?
Brandt

1
@Brandt import numpy as np
vgoklani

3
@vgoklani +1 pour Jupyter Themes
Gursharan Singh

Réponses:


615

Si vous ne souhaitez pas modifier vos paramètres par défaut et que vous souhaitez uniquement modifier la largeur du bloc-notes actuel sur lequel vous travaillez, vous pouvez saisir les éléments suivants dans une cellule:

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

11
Agréable. Il semble que cela ne modifie que les cellules de code / démarque. Existe-t-il un moyen de le faire également effectuer les cellules de sortie?
dreyco676

13
Cette solution a fonctionné pour moi! Je n'ai pas eu besoin d'installer de lib ou de paquet pour l'utiliser.
Bill Ancalagon le noir

1
J'utilise Jupyter pour Julia. Savez-vous ce dont j'ai besoin dans ce cas?
Becko

68
Cela a changé ma vie
YellowPillow

1
@becko selon le discours de Julia , cela fonctionne:display("text/html", "<style>.container { width:100% !important; }</style>")
Liso

209

Cette div.cellsolution ne fonctionnait pas réellement sur mon IPython, mais heureusement, quelqu'un a suggéré une solution de travail pour les nouveaux IPythons:

Créer un fichier ~/.ipython/profile_default/static/custom/custom.css(iPython) ou ~/.jupyter/custom/custom.css(Jupyter) avec du contenu

.container { width:100% !important; }

Redémarrez ensuite les blocs-notes iPython / Jupyter. Notez que cela affectera tous les ordinateurs portables.


5
Ces petits extraits d'informations devraient être affichés quelque part, merci encore!
vgoklani

4
C'était extrêmement utile
ivrin

13
Le démarrage de l'emplacement du dossier personnalisé IPython 4.1 est devenu ~/.jupyter/custom/.
Romain

6
J'ai dû redémarrer le bloc-notes Jupyter (4.1.0) pour que cela fonctionne. Je mets le css ci-dessus~/.jupyter/custom/custom.css
Paul

6
100% n'a pas l'air très agréable, je l'ai changé à 90%
liang

69

Pour que cela fonctionne avec jupyter (version 4.0.6), j'ai créé ~/.jupyter/custom/custom.csscontenant:

/* 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;
}

Cela fonctionne sous Linux! Mais où dois-je l'enregistrer dans Windows?
crusaderky

6
Essayez de lancer jupyter --config-dir, puis créez custom\custom.cssà n'importe quel emplacement renvoyé par cette commande.
jvd10

@ jvd10 cela n'a pas fonctionné pour moi. Y custom.cssa- t -il un autre code que l'extrait ci-dessus? Aussi comment Jupyter sait-il l'utiliser?
mLstudent33

Sur linux et osx au moins, par défaut, jupyter recherche un répertoire caché appelé .jupyterpour les fichiers de configuration, y compris les personnalisations comme ci-dessus. Ce qui précède devrait être le seul contenu de custom.css. Voir ici pour plus d'informations: jupyter.readthedocs.io/en/latest/projects/…
jvd10

24

Il est temps d'utiliser jupyterlab

Enfin, une mise à niveau bien nécessaire a été apportée aux ordinateurs portables. Par défaut, il utilise toute la largeur de votre fenêtre comme tout autre IDE à part entière.

Tout ce que tu dois faire est:

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

Voici une capture d'écran de blog.Jupyter.org


2
JupyterLab est toujours en version bêta et présente quelques régressions par rapport aux cahiers ordinaires (par conception). Un notable est d'interdire JS par défaut et d'avoir besoin d'extensions pour chaque petite visualisation JS
Ciprian Tomoiagă

1
Et comment pouvez-vous changer la largeur d'une cellule de Jupyter Lab?
multigoodverse

1
J'ai du mal pendant une heure à faire fonctionner le laboratoire jupyter. au début, aucun graphique (pyplot / plotly) n'était affiché. Les documents ne mentionnent pas que vous devez installer des extensions pour cela. J'ai essayé d'installer l'extension compliquée. découvert que vous avez besoin de nodejs pour cela. installé les deux, maintenant je reçois le message "Impossible de trouver le modèle:" index.html "". À ce stade, j'ai abandonné, je reste avec le cahier jupyter.
Itamar Katz

15

Ce que je fais habituellement après une nouvelle installation, c'est de modifier le fichier css principal où tous les styles visuels sont stockés. J'utilise Miniconda mais l'emplacement est similaire aux autresC:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

Avec certains écrans, ces résolutions sont différentes et supérieures à 1. Pour être sûr, je passe tout à 98%, donc si je me déconnecte de mes écrans externes sur mon ordinateur portable, j'ai toujours une largeur d'écran de 98%.

Il suffit ensuite de remplacer 1140 px par 98% de la largeur de l'écran.

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

entrez la description de l'image ici

Après l'édition

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

entrez la description de l'image ici Enregistrez et redémarrez votre ordinateur portable


Mise à jour

J'ai récemment dû élargir les cellules Jupyter sur un environnement où il est installé, ce qui m'a amené à revenir ici et à me rappeler.

Si vous devez le faire dans env virtuel, vous avez installé jupyter. Vous pouvez trouver le fichier css dans ce sous-répertoire

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

1
C'est génial! C'est simple et accomplit exactement ce qui est nécessaire.
arbitrarystringofletters

@Gunay /notebookn'existe pas dans le répertoire pour moi.
mLstudent33

Connaissez-vous la version de votre python (python -V lorsque vous activez votre environnement) et comment avez-vous créé l'environnement virtuel? Avez-vous utilisé le module venv sur Python / Conda?
Gunay Anach

12

Vous pouvez définir le CSS d'un bloc-notes en appelant une feuille de style à partir de n'importe quelle cellule. À titre d'exemple, jetez un œil au cours 12 étapes vers Navier Stokes .

En particulier, la création d'un fichier contenant

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

devrait vous donner un point de départ. Cependant, il peut être nécessaire d'ajuster également, par exemple, div.text_cell_renderpour gérer le démarque ainsi que les cellules de code.

Si ce fichier est custom.css alors ajoutez une cellule contenant:

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

Cela appliquera tous les styles et, en particulier, modifiera la largeur de la cellule.


Cela ne fonctionne pas dans la dernière version d'IPython (version> 2). Vérifiez cette réponse: stackoverflow.com/a/24207353/2108548
rominf

Ou si vous voulez juste le changer pour le portable actuel dans les derniers ipythons et jupyter, voir la réponse de @ jjinking :)
nealmcb

8

(À partir de 2018, je vous conseillerais d'essayer JupyterHub / JupyterLab. Il utilise toute la largeur du moniteur. Si ce n'est pas une option, peut-être puisque vous utilisez l'un des fournisseurs Jupyter-as-a-service basés sur le cloud, continue de lire)

(Stylish est accusé d'avoir volé des données utilisateur, j'ai plutôt utilisé le plugin Stylus)

Je recommande d'utiliser Stylish Browser Plugin . De cette façon, vous pouvez remplacer css pour tous les blocs-notes, sans ajouter de code aux blocs-notes. Nous n'aimons pas changer la configuration dans .ipython / profile_default, car nous exécutons un serveur Jupyter partagé pour toute l'équipe et la largeur est une préférence utilisateur.

J'ai créé un style spécialement pour les écrans haute résolution orientés verticalement, qui élargit les cellules et ajoute un peu d'espace vide en bas, afin que vous puissiez positionner la dernière cellule au centre de l'écran. https://userstyles.org/styles/131230/jupyter-wide Vous pouvez, bien sûr, modifier mon CSS à votre goût, si vous avez une mise en page différente, ou si vous ne voulez pas d'espace vide supplémentaire à la fin.

Enfin et surtout, Stylish est un excellent outil à avoir dans votre ensemble d'outils, car vous pouvez facilement personnaliser d'autres sites / outils à votre guise (par exemple Jira, Podio, Slack, etc.)

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

.end_space {
  height: 800px;
}

oui, le style est génial! Pouvez-vous s'il vous plaît ajouter le code nécessaire pour l'espace supplémentaire en bas? J'ai toujours une cellule vide avec beaucoup de lignes vides afin d'avoir la vraie dernière cellule centrée -_-.
Ciprian Tomoiagă

2
Élégant a été retiré hier pour avoir volé l'historique de navigation des utilisateurs: gadgets.ndtv.com/internet/news/…
stason

6

Pour les utilisateurs de Chrome, je recommande Stylebot , qui vous permettra de remplacer n'importe quel CSS sur n'importe quelle page, vous permettra également de rechercher et d'installer d'autres partages CSS personnalisés. Cependant, pour notre objectif, nous n'avons besoin d'aucun thème avancé. Ouvrez Stylebot, changez pour Edit CSS. Jupyter capture certaines frappes, vous ne pourrez donc pas taper le code ci-dessous. Copiez-collez simplement ou simplement votre éditeur:

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

Changez la largeur comme vous le souhaitez, je trouve que 90% est plus joli que 100%. Mais cela dépend entièrement de vos yeux.


Super suggestion pour le cahier jupyter mais fait bien plus encore!
Robino

@bizi, dois-je cliquer à l'intérieur d'une cellule de code, puis cliquer avec le bouton droit, sélectionner Stylebot, modifier le CSS et copier et coller ce que vous avez? Si c'est le cas, cela n'a pas fonctionné pour moi. J'ai juste obtenu des marges plus grosses des deux côtés.
mLstudent33

4

C'est le code que j'ai fini par utiliser. Il étire les cellules d'entrée et de sortie vers la gauche et la droite. Notez que l'indication du numéro d'entrée / sortie aura disparu:

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

cool! J'exclurais seulement la dernière ligne car elle fait disparaître les informations d'exécution des cellules (partie gauche des cellules, qui montre l'ordre d'exécution et un * lorsque l'exécution n'est pas encore terminée)
onofricamila

2

J'ai apporté quelques modifications à la solution de @ jvd10. Le '! Important' semble trop fort pour que le conteneur ne s'adapte pas bien lorsque la barre latérale de la table des matières est affichée. Je l'ai supprimé et ajouté «min-width» pour limiter la largeur minimale.

Voici mon .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

J'ai tout essayé et rien n'a fonctionné pour moi, j'ai fini par afficher mon bloc de données en HTML comme suit

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

-1

Pour les utilisateurs de Firefox / Chrome, une bonne façon d'atteindre 100% de largeur est d'utiliser un script TamperMonkey personnalisé .

Les avantages sont

  1. configurez-le une fois dans votre navigateur, pas besoin de modifier la configuration du serveur.
  2. fonctionne avec plusieurs serveurs jupyter.
  3. TamperMonkey est fiable, maintenu et stable.
  4. De nombreuses personnalisations supplémentaires sont possibles via javascript.

Ce script fonctionne pour moi https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.