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

Question

我想要在浏览器中增加IPython笔记本的宽度。我的屏幕分辨率很高，我希望扩大单元格的宽度/大小以利用这个额外的空间。

谢谢！

- vgoklani

---

有没有一种方法可以将新的宽度应用于输出格式？如果我使用 print（...） 输出矩阵或列表，则换行仍然发生在相同位置，因此输出未使用添加的空间。 - Timo

尝试使用 np.set_printoptions(250) - vgoklani

谢谢！np.set_printoptions(linewidth=110) 对我来说有效。 - Timo

@vgoklani 抱歉，但是“np”？那来自哪里？ - Brandt

@Brandt 导入 numpy as np - vgoklani

Answer 1

如果您不想更改默认设置，只想更改当前笔记本的宽度，可以在单元格中输入以下内容：

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

- tonyslowdown

---

好的。这似乎只会更改代码/标记单元格。是否有可能也让它更改输出单元格？ - dreyco676

这个解决方案对我很有用！我不需要安装任何库或软件包就能使用它。 - Ancalagon BerenLuthien

根据julia论坛的说法，这个方法可行：display("text/html", "<style>.container { width:100% !important; }</style>")。 - Liso

哇塞，这改变了我的生活，让它变得更好了...非常感谢！！！看着这个只有600像素宽度的盒子已经让我感到疲惫了，尤其是当我拥有一台2k 30英寸的显示器时！！ - Anatoly Alekseev

在输出单元格中添加display(HTML("<style>.output_result { max-width:100% !important; }</style>"))以更改其宽度！ - onofricamila

Answer 2

那个 div.cell 的解决方案在我的 IPython 上并没有实际起作用，不过幸运的是有人提出了一个新的 IPython 的可行解决方案：

创建一个文件 ~/.ipython/profile_default/static/custom/custom.css (iPython) 或者 ~/.jupyter/custom/custom.css (Jupyter)，并将以下内容添加进去：

.container { width:100% !important; }

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

- Gere

---

这些小的信息片段应该被发布在某个地方，再次感谢！ - vgoklani

非常有用。 - ivrin

IPython 4.1起，自定义文件夹的位置已更改为~/.jupyter/custom/。 - Romain

为了让Jupyter笔记本（4.1.0）正常工作，我不得不重新启动它。我将上述CSS放在“~/.jupyter/custom/custom.css”中。 - Paul

100%看起来不太好，我把它改成了90%。 - liang

Answer 3

为了使其在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;
}

- jvd10

---

这在Linux中可以运行！但是在Windows中我需要把它保存在哪里？ - crusaderky

尝试运行 jupyter --config-dir，然后在该命令返回的任何位置创建 custom\custom.css。 - jvd10

@jvd10，这对我没有用。custom.css除了上面的代码片段之外还有其他代码吗？另外，Jupyter是如何知道要使用它的？ - mLstudent33

在Linux和OSX上，Jupyter默认会查找名为.jupyter的隐藏目录以获取配置文件，包括上述自定义内容。上述内容应该是custom.css的唯一内容。有关更多信息，请参见此处：https://jupyter.readthedocs.io/en/latest/projects/jupyter-directories.html#config-dir - jvd10

我安装的版本与.container不兼容。取而代之的是这个：.jp-Cell { width: 99% !important; } - tom1919

Answer 4

是时候开始使用JupyterLab了。

终于，Notebook 迎来了一个非常必要的升级。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的截图

- Thamme Gowda

---

JupyterLab仍处于测试版，并且与常规笔记本存在一些退化（设计上）。其中一个显著的问题是默认情况下禁止JS，并需要扩展来进行每个小型JS可视化。 - Ciprian Tomoiagă

你可以如何改变 Jupyter Lab 单元格的宽度？ - multigoodverse

我花了一个小时让Jupyter Lab正常运行。开始时没有显示任何图形（pyplot/plotly）。文档没有提到必须安装扩展程序才能实现。尝试安装Plotly扩展程序，发现需要Node.js。安装了两者后，现在我收到“找不到模板：“index.html””的消息。此时我放弃了，仍然使用Jupyter Notebook。 - Itamar Katz

在 JupyterLab 中，JavaScript 的执行已经不再被禁止（实际上已经有一段时间了）。 - krassowski

我总觉得 JupyterLab 是为了写点新东西而写的，但对于普通用户来说没有什么用处。我希望它能够做的唯一一件事情就是在弹出窗口中显示一个具有永久更新输出的输出单元格，与笔记本的其余部分分开。尽管 JupyterLab 承诺提供更灵活的 UI，但它甚至不能做到这一点。（我知道它可以将输出单元格显示为选项卡内的选项卡，但再次强调，我不想要那个，浏览器已经有完美的窗口和选项卡，我可以将它们放在不同的监视器上，而 JupyterLab 无法做到这一点。） - Bananach

Answer 5

通常在新安装后，我会修改存储所有视觉样式的主 CSS 文件。我使用Miniconda，但位置与其他类似 C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

某些屏幕的分辨率不同且数量超过1个。为了保险起见，我将所有比例更改为98%，这样如果我从笔记本电脑的外部屏幕断开连接，仍然会有98%的屏幕宽度。

然后只需用屏幕宽度的98% 替换 1140px 即可。

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

编辑后

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

保存并重新启动你的notebook

---

更新

最近需要扩大已安装Jupyter环境上的Jupyter cells，这使我回到了这里并提醒自己。

如果你需要在虚拟环境中安装的Jupyter上进行此操作，你可以在这个子目录下找到css文件

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

- Gunay Anach

---

太棒了！它简单易用，正好能达到所需的目的。 - user3092503

@Gunay 我的目录中不存在/notebook。 - mLstudent33

你知道你的Python版本吗？（在激活环境时输入python -V）你是如何创建虚拟环境的？你使用了Python/Conda上的venv模块吗？ - Gunay Anach

如果我能给你十个赞，我会的。太棒了！ - Pythn

Answer 6

对于笔记本7，您可以使用以下方法：

from IPython.display import display, HTML
display(HTML("<style>:root { --jp-notebook-max-width: 100% !important; }</style>"))

- Iliya Zhechev

---

谢谢，这个方法有效，但如果我们想要永久地进行更改，将代码添加到~/.jupyter/custom/custom.css中的:root { --jp-notebook-max-width: 100% !important; }并不起作用:/ ...有什么建议吗？谢谢 - undefined

https://github.com/jupyter/notebook/discussions/7152 - undefined

Answer 7

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

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

- AaronDT

---

太棒了！我只会排除最后一行，因为它会使单元格的执行信息消失（单元格左侧显示执行顺序以及在执行未完成时显示*）。 - onofricamila

Answer 8

您可以通过从任何单元格调用样式表来设置笔记本的CSS。例如，请查看12步到Navier Stokes课程。

特别地，创建一个包含样式信息的文件

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

这应该为您提供一个起点。但是，可能还需要调整例如 div.text_cell_render 以处理 markdown 和代码单元格。

如果那个文件是 custom.css，那么添加一个包含以下内容的单元格：

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

这将应用所有样式，特别是更改单元格宽度。

- Ian

---

这在最新的IPython（版本> 2）中不起作用。请查看此答案：https://dev59.com/IWEh5IYBdhLWcg3w0WZP#24207353 - rominf

或者如果您只想在最近的ipython和jupyter笔记本中更改它，请参阅@jjinking的答案 :) - nealmcb

Answer 9

截至2018年，我建议尝试使用JupyterHub/JupyterLab。它可以使用整个显示器的宽度。如果这不是一个选项，可能是因为您正在使用基于云的Jupyter-as-a-service提供商，请继续阅读。

Stylish被指控窃取用户数据，我已经转而使用Stylus插件。

我建议使用Stylish浏览器插件。这样，您可以覆盖所有笔记本电脑的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;
}

- volodymyr

---

是的，Stylish非常好！你能否添加所需的代码来增加底部的额外空间？我总是有一个空单元格，里面有很多空行，以便将真正的最后一个单元格居中 -_-。 - Ciprian Tomoiagă

Stylish昨天因窃取用户的浏览历史被下架：https://gadgets.ndtv.com/internet/news/google-mozilla-remove-stylish-browser-chrome-firefox-extension-1878558 - stason

Answer 10

对于Chrome用户，我推荐使用Stylebot，它可以让您覆盖任何页面上的CSS，并允许您搜索和安装其他共享自定义CSS。但是，为了我们的目的，我们不需要任何高级主题。打开Stylebot，切换到Edit CSS。Jupyter会捕获一些按键操作，因此您将无法键入下面的代码。只需复制并粘贴，或使用您的编辑器：

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

根据个人喜好更改宽度，我发现90%看起来比100%更好看。但是完全取决于你的审美。

- bizi

---

很棒的建议适用于Jupyter笔记本，但它可以做更多的事情！ - Robino

@bizi，我是不是要点击代码单元格，然后右键，选择Stylebot，编辑CSS，然后复制粘贴你的内容？如果是这样，对我来说没有起作用。我只是得到了两侧更宽的边距。 - mLstudent33