如何在浏览器中增加Jupyter / ipython笔记本的单元格宽度?

问题:如何在浏览器中增加Jupyter / ipython笔记本的单元格宽度?

我想在浏览器中增加ipython笔记本的宽度。我有一个高分辨率的屏幕,我想扩展单元格的宽度/大小以利用这个额外的空间。

谢谢!


编辑:5/2017

我现在使用jupyterthemes:https : //github.com/dunovank/jupyter-themes

和此命令:

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

可以将宽度设置为100%,并且主题很好。

I would like to increase the width of the ipython notebook in my browser. I have a high-resolution screen, and I would like to expand the cell width/size to make use of this extra space.

Thanks!


edit: 5/2017

I now use jupyterthemes: https://github.com/dunovank/jupyter-themes

and this command:

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

which sets the width to 100% with a nice theme.


回答 0

如果您不想更改默认设置,而只想更改正在使用的当前笔记本的宽度,则可以在单元格中输入以下内容:

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

If you don’t want to change your default settings, and you only want to change the width of the current notebook you’re working on, you can enter the following into a cell:

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

回答 1

div.cell解决方案实际上不适用于我的IPython,但是幸运的是有人提出了适用于新IPython的可行解决方案:

创建包含内容的文件~/.ipython/profile_default/static/custom/custom.css(iPython)或~/.jupyter/custom/custom.css(Jupyter)

.container { width:100% !important; }

然后重新启动iPython / Jupyter笔记本。请注意,这将影响所有笔记本电脑。

That div.cell solution didn’t actually work on my IPython, however luckily someone suggested a working solution for new IPythons:

Create a file ~/.ipython/profile_default/static/custom/custom.css (iPython) or ~/.jupyter/custom/custom.css (Jupyter) with content

.container { width:100% !important; }

Then restart iPython/Jupyter notebooks. Note that this will affect all notebooks.


回答 2

为了使它与jupyter(版本4.0.6)一起使用,我创建了以下内容~/.jupyter/custom/custom.css

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

To get this to work with jupyter (version 4.0.6) I created ~/.jupyter/custom/custom.css containing:

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

回答 3

是时候使用jupyterlab

最后,笔记本电脑急需升级。默认情况下,它使用窗口的整个宽度,就像其他任何成熟的本机IDE一样。

您要做的就是:

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

这是blog.Jupyter.org的屏幕截图

It’s time to use jupyterlab

Finally, a much-needed upgrade has come to notebooks. By default, it uses the full width of your window like any other full-fledged native IDE.

All you have to do is:

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

Here is a screenshot from blog.Jupyter.org


回答 4

全新安装后,我通常要做的是修改存储所有视觉样式的主css文件。我使用Miniconda,但位置与其他人相似C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

在某些屏幕上,这些分辨率是不同的,并且大于1。为安全起见,我将所有分辨率更改为98%,因此,如果从笔记本电脑上的外接屏幕断开连接,则屏幕宽度仍为98%。

然后,将1140px替换为屏幕宽度的98%

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

编辑后

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

保存并重新启动笔记本


更新资料

最近不得不在已安装的环境中扩展Jupyter单元,这导致我回到这里提醒自己。

如果您需要在虚拟环境中进行安装,请先安装jupyter。您可以在此子目录中找到css文件

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

What I do usually after new installation is to modify the main css file where all visual styles are stored. I use Miniconda but location is similar with others C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

With some screens these resolutions are different and more than 1. To be on the safe side I change all to 98% so if I disconnect from my external screens on my laptop I still have 98% screen width.

Then just replace 1140px with 98% of the screen width.

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

After editing

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

Save and restart your notebook


Update

Recently had to wider Jupyter cells on an environment it is installed, which led me to come back here and remind myself.

If you need to do it in virtual env you installed jupyter on. You can find the css file in this subdir

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

回答 5

您可以通过从任何单元格调用样式表来设置笔记本的CSS。作为示例,请看Navier Stokes类12个步骤

特别是,创建一个包含

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

应该给你一个起点。但是,可能有必要也进行调整,例如div.text_cell_render处理降价和代码单元。

如果是该文件,custom.css则添加包含以下内容的单元格:

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

这将应用所有样式,尤其是更改像元宽度。

You can set the CSS of a notebook by calling a stylesheet from any cell. As an example, take a look at the 12 Steps to Navier Stokes course.

In particular, creating a file containing

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

should give you a starting point. However, it may be necessary to also adjust e.g div.text_cell_render to deal with markdown as well as code cells.

If that file is custom.css then add a cell containing:

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

This will apply all the stylings, and, in particular, change the cell width.


回答 6

(从2018年开始,我建议您尝试使用JupyterHub / JupyterLab。它使用监视器的整个宽度。如果这不是一种选择,则可能是因为您使用的是基于云的Jupyter即服务提供商,继续阅读)

(时尚被指控窃取用户数据,我已改为使用Stylus插件)

我建议使用时尚浏览器插件。这样,您可以覆盖所有笔记本的css,而无需向笔记本中添加任何代码。我们不喜欢在.ipython / profile_default中更改配置,因为我们正在为整个团队运行共享的Jupyter服务器,并且宽度是用户首选项。

我专门为垂直方向的高分辨率屏幕设计了一种样式,该样式使单元格变宽,并在底部添加了一些空白区域,因此您可以将最后一个单元格放置在屏幕的中央。 https://userstyles.org/styles/131230/jupyter-wide 当然,如果您使用其他布局,或者您不希望最后有多余的空格,则可以根据自己的喜好修改我的CSS。

最后但并非最不重要的一点是,Stylish是包含在工具集中的出色工具,因为您可以根据自己的喜好轻松自定义其他站点/工具(例如Jira,Podio,Slack等)。

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

.end_space {
  height: 800px;
}

(As of 2018, I would advise trying out JupyterHub/JupyterLab. It uses the full width of the monitor. If this is not an option, maybe since you are using one of the cloud-based Jupyter-as-a-service providers, keep reading)

(Stylish is accused of stealing user data, I have moved on to using Stylus plugin instead)

I recommend using Stylish Browser Plugin. This way you can override css for all notebooks, without adding any code to notebooks. We don’t like to change configuration in .ipython/profile_default, since we are running a shared Jupyter server for the whole team and width is a user preference.

I made a style specifically for vertically-oriented high-res screens, that makes cells wider and adds a bit of empty-space in the bottom, so you can position the last cell in the centre of the screen. https://userstyles.org/styles/131230/jupyter-wide You can, of course, modify my css to your liking, if you have a different layout, or you don’t want extra empty-space in the end.

Last but not least, Stylish is a great tool to have in your toolset, since you can easily customise other sites/tools to your liking (e.g. Jira, Podio, Slack, etc.)

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

.end_space {
  height: 800px;
}

回答 7

对于Chrome用户,我建议使用Stylebot,它可以让您覆盖任何页面上的所有CSS,还可以搜索和安装其他共享自定义CSS。但是,出于我们的目的,我们不需要任何高级主题。打开Stylebot,更改为Edit CSS。Jupyter捕获了一些击键,因此您将无法在其中键入以下代码。只需复制和粘贴,或者仅编辑即可:

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

根据需要更改宽度,我发现90%的外观比100%的外观好。但这完全取决于您。

For Chrome users, I recommend Stylebot, which will let you override any CSS on any page, also let you search and install other share custom CSS. However, for our purpose we don’t need any advance theme. Open Stylebot, change to Edit CSS. Jupyter captures some keystrokes, so you will not be able to type the code below in. Just copy and paste, or just your editor:

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

Change the width as you like, I find 90% looks nicer than 100%. But it is totally up to your eye.


回答 8

这是我最终使用的代码。它将输入和输出单元格向左和向右拉伸。请注意,输入/输出编号指示将消失:

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

This is the code I ended up using. It stretches input & output cells to the left and right. Note that the input/output number indication will be gone:

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

回答 9

我对@ jvd10的解决方案进行了一些修改。“!important”似乎太强了,以至于显示TOC侧栏时容器不能很好地适应。我将其删除并添加了“最小宽度”以限制最小宽度。

这是我的.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;
}

I made some modification to @jvd10’s solution. The ‘!important’ seems too strong that the container doesn’t adapt well when TOC sidebar is displayed. I removed it and added ‘min-width’ to limit the minimal width.

Here is my .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;
}

回答 10

我尝试了一切,但对我没有用,最终我将数据框显示为HTML,如下所示

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

I tried everything and nothing worked for me, I ended up using displaying my data frame as HTML as follows

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

回答 11

对于Firefox / Chrome用户,一种实现100%宽度的好方法是使用自定义TamperMonkey脚本。

好处是

  1. 在浏览器中配置一次,无需修改服务器配置。
  2. 与多个jupyter服务器一起使用。
  3. TamperMonkey受信任,维护且稳定。
  4. 通过javascript可以进行许多其他自定义。

该脚本对我有用https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js

For Firefox/Chrome users, a nice way to achieve 100% width is to use a custom TamperMonkey script.

The benefits are

  1. configure this once in your browser, no need to modify the server configuration.
  2. works with multiple jupyter servers.
  3. TamperMonkey is trusted, maintained, and stable.
  4. Lots of additional customization is possible via javascript.

This script works for me https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js