我想在我的浏览器中增加 ipython 笔记本的宽度。我有一个高分辨率屏幕,我想扩大单元格宽度/大小以利用这个额外的空间。
谢谢!
编辑/答案:5/2017
我现在使用 jupyterthemes:https://github.com/dunovank/jupyter-themes
这个命令:
jt -t oceans16 -f roboto -fs 12 -cellw 100%
它将宽度设置为 100%,主题很好。
print(...)
输出矩阵或列表,换行符仍然出现在同一位置,因此输出没有使用添加的空间。
np.set_printoptions(linewidth=110)
适合我。
如果您不想更改默认设置,而只想更改正在处理的当前笔记本的宽度,则可以在单元格中输入以下内容:
from IPython.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))
该 div.cell
解决方案实际上不适用于我的 IPython,但幸运的是,有人为新的 IPython 提出了一个可行的解决方案:
创建包含内容的文件 ~/.ipython/profile_default/static/custom/custom.css
(iPython) 或 ~/.jupyter/custom/custom.css
(Jupyter)
.container { width:100% !important; }
然后重新启动 iPython/Jupyter 笔记本。请注意,这将影响所有笔记本。
~/.jupyter/custom/
。
~/.jupyter/custom/custom.css
为了让它与 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;
}
jupyter --config-dir
,然后在命令返回的任何位置创建 custom\custom.css
。
custom.css
还有其他代码吗?此外,Jupyter 是如何知道使用它的?
.jupyter
的隐藏目录来存储配置文件,包括上述自定义项。以上应该是custom.css的唯一内容。有关更多信息,请参见此处:jupyter.readthedocs.io/en/latest/projects/…
是时候使用jupyterlab了
最后,笔记本电脑进行了急需的升级。 Jupyterlab 默认使用窗口的整个宽度,就像任何其他成熟的原生 IDE 一样。
你所要做的就是:
pip install jupyterlab
# if you use conda
conda install -c conda-forge jupyterlab
# to run
jupyter lab # instead of jupyter notebook
https://cdn-images-1.medium.com/max/1400/1*OneJZOqKqBZ9oN80kRX7kQ.png
jupyter lab
具有响应式 UI =>要更改单元格的宽度,只需调整浏览器窗口的大小。我已经使用 jupyter lab 大约 3 年了,而且还在不断增加,我从来没有遇到过问题。建议:如果您在使用 jupyter lab 时遇到问题,则可能是环境混乱,安装冲突。使用 conda 等并保持环境清洁。
新安装后我通常做的是修改存储所有视觉样式的主 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;
}
}
https://i.stack.imgur.com/6adwp.png
编辑后
@media (min-width: 1200px) {
.container {
width: 98%;
}
}
https://i.stack.imgur.com/GJlZ4.png
更新
最近不得不在它安装的环境中扩大 Jupyter 单元,这导致我回到这里并提醒自己。
如果您需要在安装了 jupyter 的虚拟环境中执行此操作。您可以在此子目录中找到 css 文件
env/lib/python3.6/site-packages/notebook/static/style/stye.min.css
/notebook
在我的目录中不存在。
您可以通过从任何单元格调用样式表来设置笔记本的 CSS。例如,看一下 12 Steps to Navier Stokes course。
特别是,创建一个包含
<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()
这将应用所有样式,特别是更改单元格宽度。
这是我最终使用的代码。它将输入和输出单元向左和向右拉伸。请注意,输入/输出编号指示将消失:
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>"))
(截至 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;
}
对于 Chrome 用户,我推荐 Stylebot,它可以让您覆盖任何页面上的任何 CSS,还可以让您搜索和安装其他共享自定义 CSS。但是,出于我们的目的,我们不需要任何高级主题。打开 Stylebot,更改为 Edit CSS
。 Jupyter 会捕获一些击键,因此您将无法在下面键入代码。只需复制和粘贴,或者只是您的编辑器:
#notebook-container.container {
width: 90%;
}
随意改变宽度,我发现 90% 看起来比 100% 好看。但这完全取决于你的眼睛。
我对@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;
}
请注意,如果您以旧方式执行此操作,您现在将收到弃用警告。这使用较新的子模块命名:
from IPython.display import HTML
HTML("<style>.container { width:100% !important; }</style>")
我尝试了一切,但没有任何效果,我最终使用将我的数据框显示为 HTML,如下所示
from IPython.display import HTML
HTML (pd.to_html())
对于 Firefox/Chrome 用户,实现 100% 宽度的好方法是使用自定义 TamperMonkey 脚本。
好处是
在浏览器中配置一次,无需修改服务器配置。适用于多个 jupyter 服务器。 TamperMonkey 是值得信赖、维护和稳定的。通过 javascript 可以进行许多额外的自定义。
添加到@jdv10 和@gerenuk 的答案
最好的选择是添加和调整 custom.css 文件。下面我分享我的 CSS 文件内容,我用它来挤出 Jupyter Notebook 中的最大屏幕区域。
由于它以渲染页面的原始 CSS 代码为目标,因此它应该适用于用于在 Notebook 上进行编码的所有类型的语言。
/* 笔记本样式 */ body, p, div.rendered_html { color: #93a1a1; font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif;字体大小:11pt; } 身体 { 背景颜色:#eee8d5 !重要; } /* 以下控制单元格周围的方面 */ #notebook { background-color: #073642 !important; box-shadow: inset 20px 36px 20px -35px black !important;边距:1px!重要;填充:1px!重要; } #notebook-container { padding: 2px !important; } /* 使笔记本单元格占据几乎所有可用宽度 */ .container { width:99.5% !important; /*margin:.5% !important;*/ /*color: #93a1a1 !important;*/ color: black !important;背景颜色:浅蓝色!重要; } /* 单元格输出 */ .rendered_html pre, .rendered_html code { color: inherit !important;背景颜色:继承!重要; } .rendered_html 表格,.rendered_html td,.rendered_html th { 边框:1px 实心 #586e75 !important; } div.cell { 宽度:100% !important;边距:5px!重要; /* margin-left:2px !important; */ /* margin-right:2px !important; */ padding: 2px !important; /* 下面覆盖了输入区域的背景颜色 */ /* background-color: yellow !important; */ /* 边框颜色:黑色 !important; */ } /* 防止编辑单元格高亮框被剪切; * 重要,因此它在单元格处于编辑模式时也可以工作*/ div.cell.selected { border-left-width: 5px !important;右边框宽度:1px !important;边框顶部宽度:2px!重要;边框底部宽度:2px!重要;边框颜色:红色!重要; } /*这是编辑器或输入区域左侧的区域*/ div.run_this_cell { width: auto !important;颜色:绿色!重要;填充:0!重要; padding-top: 5px !important; padding-left: 5px !important;字体粗细:粗体!重要;字体:2em sans-serif; } div.input_area { 边框颜色:绿色!重要;背景颜色:#ffffdd !important; } .prompt { line-height: 1em !important; } div.prompt { 最小宽度:自动;背景颜色:白色; } div.input_prompt { 颜色: #268bd2 !important;颜色:#000000 !重要;字体粗细:粗体!重要;边框:1px 实心#ff9900 !important;背景色:黄绿; padding-right: 0px !important;文本对齐:中心!重要;宽度:自动!重要;字体大小:10px!重要; } div.output_area { 颜色:#000000 !important;背景颜色:#e2e2ff !important;字体大小:0.9em!重要; } /* 语法高亮 */ .cm-s-ipython span.cm-comment { /*color: #6c71c4 !important;*/ color:midnightblue !important;颜色:rgb(100, 100, 170) !important;字体样式:斜体!重要; } .cm-s-ipython span.cm-string { 颜色: rgb(100, 20, 29) !important; }
display("text/html", "<style>.container { width:100% !important; }</style>")
display(HTML("<style>.output_result { max-width:100% !important; }</style>"))
以更改输出单元格的宽度!