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

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

谢谢!

编辑/回答: 5/2017

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

还有这命令:

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

这设置宽度为100%与一个漂亮的主题。

337296 次浏览
小开

您可以通过从任何单元格调用样式表来设置笔记本的CSS。作为一个例子，看一下到纳维尔·斯托克斯球场12步。

特别是，创建一个包含

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

应该能给你一个起点。然而，可能还需要调整e.g. 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()

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

小开

div.cell解决方案实际上在我的IPython上不起作用，但幸运的是，有人为新的IPython提出了一个有效的解决方案:

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

.container { width:100% !important; }

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

小开
最佳答案

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

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

为了让它与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;
}
小开

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

(时尚被指控窃取用户数据，我已经转向使用Stylus插件)

我建议使用时髦的浏览器插件。通过这种方式，您可以覆盖所有笔记本的css，而无需向笔记本添加任何代码。 我们不喜欢改变.ipython/profile_default中的配置，因为我们为整个团队运行一个共享的Jupyter服务器，宽度是用户的首选项 我专门为垂直方向的高分辨率屏幕制作了一种样式，使单元格更宽，并在底部添加了一些空白空间，因此您可以将最后一个单元格置于屏幕的中心。 https://userstyles.org/styles/131230/jupyter-wide 当然，如果你有不同的布局，或者你不希望最后有额外的空白，你可以根据自己的喜好修改我的css

最后但并非最不重要的是，在你的工具集中有一个很好的工具，因为你可以很容易地自定义其他网站/工具到你的喜好(例如Jira, Podio, Slack等)。

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


.end_space {
height: 800px;
}
小开

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

enter image description here

后编辑

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

enter image description here 保存并重新启动您的笔记本

更新

最近不得不拓宽Jupyter细胞上的一个环境，它是安装，这导致我回到这里，提醒自己。

如果你需要在虚拟环境中安装jupyter。你可以在这个子目录下找到css文件

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

对于Chrome用户，我推荐Stylebot，它可以让你覆盖任何页面上的任何CSS，也可以让你搜索和安装其他共享自定义CSS。然而，出于我们的目的，我们不需要任何提前的主题。打开Stylebot，更改为Edit CSS。Jupyter捕获了一些击键，因此您将无法键入下面的代码。只需复制粘贴，或只需你的编辑器:

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

改变宽度随你喜欢，我发现90%看起来比100%更好。但这完全取决于你的眼睛。

小开

是时候使用jupyterlab了

笔记本电脑终于迎来了迫切需要的升级。默认情况下，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的截图

.
小开

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

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

我尝试了所有的方法，没有什么对我有用，我最终使用如下HTML显示我的数据帧

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

我对@jvd10的解决方案做了一些修改。“!important'似乎太强了，当TOC侧栏显示时，容器不能很好地适应。我删除了它，并添加了“min-width”来限制最小宽度。

这是我的。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;
}
小开

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

好处是

  1. 在浏览器中配置一次，不需要修改服务器配置。
  2. 工作与多个jupyter服务器。
  3. TamperMonkey是可信的、维护的、稳定的。
  4. 很多额外的定制是可以通过javascript实现的。

这个脚本适用于我https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js

小开

添加到@jdv10和@gerenuk的回答中

最好的选择是添加和调整custom.css文件。下面是我 分享我的CSS文件内容，我用来挤出最大

因为它的目标是渲染页面的普通CSS代码，它应该适用于所有类型的 

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

小开

请注意，如果您使用旧的方法执行此操作，现在将得到一个弃用警告。这使用了较新的子模块命名:

from IPython.display import HTML


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

提交答案