![](/img/trans.png)
[英]How do I increase the cell width of the ipython notebook in Enthought Canopy?
[英]How do I increase the cell width of the Jupyter/ipython notebook in my browser?
我想在我的瀏覽器中增加 ipython 筆記本的寬度。 我有一個高分辨率屏幕,我想擴大單元格寬度/大小以利用這個額外的空間。
謝謝!
編輯/答案: 5/2017
我現在使用jupyterthemes : https ://github.com/dunovank/jupyter-themes
這個命令:
jt -t oceans16 -f roboto -fs 12 -cellw 100%
它將寬度設置為 100%,主題很好。
如果您不想更改默認設置,而只想更改您正在處理的當前筆記本的寬度,則可以在單元格中輸入以下內容:
from IPython.core.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(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;
}
是時候使用jupyterlab
最后,筆記本電腦急需升級。 默認情況下,它像任何其他成熟的本機 IDE 一樣使用窗口的整個寬度。
您所要做的就是:
pip install jupyterlab
# if you use conda
conda install -c conda-forge jupyterlab
# to run
jupyter lab # instead of jupyter notebook
我在新安裝后通常做的是修改存儲所有視覺樣式的主 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
您可以通過從任何單元格調用樣式表來設置筆記本的 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()
這將應用所有樣式,特別是更改單元格寬度。
(截至 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% 好看。 但這完全取決於您的眼睛。
這是我最終使用的代碼。 它將輸入和輸出單元向左和向右拉伸。 請注意,輸入/輸出編號指示將消失:
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>"))
我對@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;
}
我嘗試了一切,但對我沒有任何作用,我最終使用將我的數據框顯示為 HTML,如下所示
from IPython.display import HTML
HTML (pd.to_html())
對於 Firefox/Chrome 用戶,實現 100% 寬度的一個好方法是使用自定義的TamperMonkey腳本。
好處是
添加@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; }
請注意,如果您以舊方式執行此操作,您現在將收到棄用警告。 這使用較新的子模塊命名:
from IPython.display import HTML
HTML("<style>.container { width:100% !important; }</style>")
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.