Jupyter Notebook 셀 크기 조절하기 How to increase/decrease the cell width of the jupyter notebook in browser

Jupyter Notebook 셀 크기 조절하기

How to increase/decrease the cell width of the jupyter notebook in browser

아래와 같이 쥬피터 노트북의 소스를 블로그 등에 html 형태로 가져올 때 가로폭이 너무 커서 아래와 같이 스크롤이 생기는 경우가 있다. 한 눈에 볼 수 있도록 창의 크기를 조절해보자.

1. 먼저 Jupyter Notebook 디렉터리를 찾는다.

(tensorflow)root@localhost:~# jupyter --config-dir
/root/.jupyter
 

2. 해당 디렉토리에 custom 디렉터리를 만들고 아래와 같은 custom.css 파일을 만든다.

(width 는 취향에 맞게 조절한다. % 가이날 820px 와 같이 써도 된다)

/* Make the notebook cells take almost all available width */
.container {
    width: 80% !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;
}

3. Jupyter Notebook 을 재실행한다.

4. 노트북 파일을 html 형태로 변환한다.

(tensorflow)root@localhost:~/tensorflow# jupyter nbconvert mnist_for_expert.ipynb
[NbConvertApp] Converting notebook mnist_for_expert.ipynb to html
[NbConvertApp] Writing 273427 bytes to mnist_for_expert.html

5. 적용한 모습이다. 좌측으로 스크롤이 생기지 않음을 확인할 수 있다.