ฉันจะเพิ่มความกว้างของเซลล์ของสมุดบันทึก Jupyter / ipython ในเบราว์เซอร์ของฉันได้อย่างไร

ฉันต้องการเพิ่มความกว้างของโน้ตบุ๊ก 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 ของฉันคน แต่โชคดีที่แนะนำวิธีการแก้ปัญหาการทำงานให้ IPythons ใหม่:

สร้างไฟล์~/.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

นี่คือภาพหน้าจอจากบล็อก Jupyter.org

สิ่งที่ฉันทำตามปกติหลังจากการติดตั้งใหม่คือการแก้ไขไฟล์ 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 ที่กว้างขึ้นในสภาพแวดล้อมที่ติดตั้งซึ่งทำให้ฉันกลับมาที่นี่และเตือนตัวเอง

หากคุณจำเป็นต้องทำในเสมือน env คุณติดตั้ง jupyter บน คุณสามารถค้นหาไฟล์ css ในส่วนย่อยนี้

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

คุณสามารถตั้งค่า CSS ของสมุดบันทึกได้โดยเรียกสไตล์ชีทจากเซลล์ใดก็ได้ เป็นตัวอย่างให้ดูที่ที่12 ขั้นตอนในการหลักสูตรเนเวียร์สโตกส์

โดยเฉพาะการสร้างไฟล์ที่มี

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

สิ่งนี้จะใช้สไตล์ทั้งหมดและโดยเฉพาะเปลี่ยนความกว้างของเซลล์

(ตั้งแต่ปีพ. ศ. 2561 ฉันจะแนะนำให้ลองใช้ JupyterHub / JupyterLab โดยใช้ความกว้างเต็มของจอภาพหากนี่ไม่ใช่ตัวเลือกบางทีอาจเป็นเพราะคุณใช้ผู้ให้บริการ Jupyter-as-a-a-cloud อ่านต่อไป)

(มีสไตล์ถูกกล่าวหาว่าขโมยข้อมูลผู้ใช้ฉันได้ย้ายไปใช้ปลั๊กอิน Stylus แทน)

ฉันแนะนำให้ใช้ปลั๊กอินเบราว์เซอร์อย่างมีสไตล์อย่างมีสไตล์เบราว์เซอร์ปลั๊กอินวิธีนี้คุณสามารถแทนที่ 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 '! สำคัญ' ดูเหมือนว่าแรงเกินไปที่คอนเทนเนอร์จะไม่ปรับตัวได้ดีเมื่อแสดงแถบด้านข้างของ 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;
}

ฉันลองทุกอย่างและไม่มีอะไรที่เหมาะกับฉันฉันเลยลงเอยด้วยการแสดง data frame เป็น HTML ดังนี้

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

สำหรับผู้ใช้ Firefox / Chrome วิธีที่ดีในการบรรลุความกว้าง 100% คือการใช้TamperMonkey ที่กำหนดเองสคริปต์

ประโยชน์คือ

1. กำหนดค่านี้ครั้งเดียวในเบราว์เซอร์ของคุณไม่จำเป็นต้องแก้ไขการกำหนดค่าเซิร์ฟเวอร์
2. ทำงานร่วมกับเซิร์ฟเวอร์ jupyter หลายแห่ง
3. TamperMonkey เชื่อถือได้บำรุงรักษาและมีเสถียรภาพ
4. การปรับแต่งเพิ่มเติมจำนวนมากสามารถทำได้ผ่านทาง javascript

สคริปต์นี้ทำงานสำหรับฉันhttps://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js