ipynb 파일을 티스토리에 알맞게 Convert 하기

Jupyter 를 사용한 이후로는 아주 사소한 메모같은 것이 아니면 Jupyter를 사용해서 정리한다.
우선 셀 단위의 편집 방식이 주제별로 작성하기 좋고, 때문에 정리에 용이하다고 생각한다.

그런데 그렇게 정리해 놓은 ipynb 파일을 html 파일로 변환해서 블로그에 올리니
align이 모두 깨지고 전반적인 내용이 오른쪽으로 많이 치우쳐져 보이는 단점이 있었다.
그래서 이를 개선하기 위해 검색해서 나름대로 입맛에 맞게 적용한 결과를 적는다.

우선, 글 작성시에 나는 Jupyter notebook이 아니라 Jupyter Lab을 사용하고 있다.

1. html로 변환한 코드에서 .container 부분의 width 픽셀값을 조정하는 방법
2. ipynb파일에 code cell을 추가하고, width=90% 로 조정하는 방법
3. Jupyter 자체에 custom.css를 적용하는 방법

1, 2번 방법은 적용해본 결과 실패했다. (상세 코드는 "티스토리 jupyter notebook" 키워드로 검색하면 나오니 생략한다.)
강제로 container의 width만 줄이다보니 container의 width는 줄어드는데, 오른쪽 내용이 잘리고 특히 container의 테두리가 미관상 보기 좋지 않았다.

 

최종적으로 적용한 방법은 3번이고 가장 깔끔하며 customize할 수 있는 범위도 가장 넓다.

1. 리눅스 기준으로 ~/.jupyter/custom/, 윈도우즈 기준으로 C:\user\.jupyter\custom 에 custom.css 파일을 생성한다.
    (모르겠으면 그냥 CLI 환경에서 jupyter notebook --generate-config 명령을 입력했을때 출력되는 경로를 찾으면 된다.)
2. custom.css 파일에 아래 내용을 입력하고 저장한다.

#notebook-container{
    box-shadow: none !important;
}
.container {
    width: 100% !important;
    box-shadow: none !important;
}

3. Jupyter Lab 에서 html으로 export 한다. (확실하게 하려면 세션을 재시작할 것)

이 방법으로 container 테두리를 제거하고, container가 오른쪽으로 과도하게 밀리는 문제를 해결할 수 있었다.
custom.css 파일을 이리저리 수정하면 더 입맛에 맞는 결과물을 찾아낼 수 있을 것이다.
마지막으로 사용하고 있는 custom.css 파일의 코드를 공유한다.

/* GLOBALS */
* {
  line-height: 2.0;
  color: #333;
}
a {
  color: #4078c0;
}
.rendered_html a:link,
a:link {
  text-decoration: none;
}
body,
.CodeMirror {
  font-family: NanumBarunGothic;
}
body.notebook_app {
  background-color: white;
}
.container {
  width: 100% !important;
}
div.code_cell .CodeMirror,
.cm-s-default .cm-comment,
.prompt,
code,
kbd,
pre,
samp {
  font-family: D2Coding;
}


/* Table */
table {display: block};


/* Container */
#notebook-container{
    box-shadow: none !important;
}
.container {
    width: 100% !important;
    box-shadow: none !important;
}


/* rendered html cell (mostly) */
.rendered_html h1,
.rendered_html h2,
.rendered_html h3,
.rendered_html h4,
.rendered_html h5,
.rendered_html h6,
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  font-family: inherit;
  line-height: inherit;
}

 

도움받은 글: https://dailyheumsi.tistory.com/37