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

Question

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

谢谢！

---

编辑/答案： 5/2017

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

这个命令：

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

它将宽度设置为 100%，主题很好。

Answer 1

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

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

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 笔记本。 请注意，这将影响所有笔记本。

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

Answer 4

是时候使用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 的截图

Answer 5

我在新安装后通常做的是修改存储所有视觉样式的主 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

Answer 6

您可以通过从任何单元格调用样式表来设置笔记本的 CSS。 举个例子，看看12 Steps to Navier Stokes 课程。

特别是，创建一个包含

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

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

Answer 7

（截至 2018 年，我建议尝试使用 JupyterHub/JupyterLab。它使用显示器的整个宽度。如果这不是一个选项，也许是因为您使用的是基于云的 Jupyter 即服务提供商之一，继续阅读）

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

我推荐使用Stylish Browser Plugin 。 通过这种方式，您可以覆盖所有笔记本的 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;
}

Answer 8

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

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

根据需要更改宽度，我发现 90% 看起来比 100% 好看。 但这完全取决于您的眼睛。

Answer 9

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

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

Answer 10

我对@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;
}

Answer 11

我尝试了一切，但对我没有任何作用，我最终使用将我的数据框显示为 HTML，如下所示

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

Answer 12

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

好处是

1. 在浏览器中配置一次，无需修改服务器配置。
2. 适用于多个 jupyter 服务器。
3. TamperMonkey 值得信赖、维护且稳定。
4. 可以通过 javascript 进行许多额外的自定义。

这个脚本对我有用 https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jp/jp

Answer 13

添加@jdv10 和@gerenuk 的答案

最好的选择是添加和调整 custom.css 文件。 下面我将分享我用来挤出 Jupyter Notebook 中最大屏幕区域的 CSS 文件内容。

由于它针对呈现页面的 vanilla CSS 代码，因此它应该适用于用于在 Notebook 上进行编码的所有类型的语言。

 /* Notebook styling */ body, p, div.rendered_html { color: #93a1a1; font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif; font-size: 11pt; } body { background-color: #eee8d5 !important; } /* the following controls aspects which are around the cells */ #notebook { background-color: #073642 !important; box-shadow: inset 20px 36px 20px -35px black !important; margin: 1px !important; padding: 1px !important; } #notebook-container { padding: 2px !important; } /* Make the notebook cells take almost all available width */ .container { width:99.5% !important; /*margin:.5% !important;*/ /*color: #93a1a1 !important;*/ color: black !important; background-color: lightblue !important; } /* Cell output */ .rendered_html pre, .rendered_html code { color: inherit !important; background-color: inherit !important; } .rendered_html table, .rendered_html td, .rendered_html th { border: 1px solid #586e75 !important; } div.cell { width:100% !important; margin: 5px !important; /* margin-left:2px !important; */ /* margin-right:2px !important; */ padding: 2px !important; /* the following overrides the background color of the input area */ /* background-color: yellow !important; */ /* border-color: black !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: 5px !important; border-right-width: 1px !important; border-top-width: 2px !important; border-bottom-width: 2px !important; border-color: red !important; } /*this is for the area to the left of the editor or input area*/ div.run_this_cell { width: auto !important; color: green !important; padding: 0 !important; padding-top: 5px !important; padding-left: 5px !important; font-weight: bold !important; font: 2em sans-serif; } div.input_area { border-color: green !important; background-color: #ffffdd !important; } .prompt { line-height: 1em !important; } div.prompt { min-width: auto; background-color: white; } div.input_prompt { color: #268bd2 !important; color: #000000 !important; font-weight: bold !important; border: 1px solid #ff9900 !important; background-color: greenyellow; padding-right: 0px !important; text-align: center !important; width: auto !important; font-size: 10px !important; } div.output_area { color: #000000 !important; background-color: #e2e2ff !important; font-size: 0.9em !important; } /* Syntax highlighting */ .cm-s-ipython span.cm-comment { /*color: #6c71c4 !important;*/ color: midnightblue !important; color: rgb(100, 100, 170) !important; font-style: italic !important; } .cm-s-ipython span.cm-string { color: rgb(100, 20, 29) !important; }

Answer 14

请注意，如果您以旧方式执行此操作，您现在将收到弃用警告。 这使用较新的子模块命名：

from IPython.display import HTML

HTML("<style>.container { width:100% !important; }</style>")