Hello World 처럼: 8월 2019

2019년 8월 7일 수요일

Jupyter 노트북 내용을 Blogger에 쓰기

Jupyter 노트북 내용을 Blogger에 쓰기

Jupyter 노트북 복사하기

Jupyter 노트북을 엽니다.
File > Dowload as > HTML (.html) 메뉴 항목을 실행하여 노트북을 HTML 파일로 저장합니다.
저장한 HTML 파일을 텍스트 편집기로 엽니다.
<html> 태그의 내용 전체를 복사합니다. 이 때 <html>과 </html> 태그는 복사하지 않습니다.

Blogger 글에 붙여넣기

Blogger에서 글쓰기 버튼을 클릭하여 새 글을 생성합니다.
글쓰기 화면의 도구바에서 HTML 버튼을 클릭합니다.
앞에서 복사한 내용을 붙여넣습니다.

Blogger 화면에 맞추기

복사한 내용 중에서 <style> 구역의 아래 항목들을 수정하면 Blogger 화면에서 좀 더 보기 좋아집니다.

Blogger 화면 폭에 맞추기
Jupyter 노트북의 폭이 Blogger 테마의 폭보다 클 경우 아래와 같이 폭을 결정하는 스타일 항목들을 주석으로 처리하면 Blogger 테마의 폭에 맞추어 내용이 표시됩니다.
```
/*
@media (min-width: 768px) {
 .container {
   width: 768px;
 }
}
@media (min-width: 992px) {
 .container {
   width: 940px;
 }
}
@media (min-width: 1200px) {
 .container {
   width: 1140px;
 }
}
*/
```

노트북 테두리 표시 상자 제거하기
Blogger 글 화면 내에서 표시되는 노트북 테두리 상자를 제거하려면 아래와 같이 상자 그림자 표시 스타일 항목 두 가지를 주석으로 처리합니다.

@media not print {
  #notebook-container {
    padding: 15px;
    background-color: #fff;
    min-height: 0;
    //-webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
    //box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  }
}

셀 상자 수평 스크롤바 숨기기
글을 담고 있는 상자의 수평 스크롤바가 표시될 수 있습니다. 이것이 불필요할 경우 아래와 같이 overflow-x 항목의 속성을 hidden으로 바꾸어 줍니다.
```
.text_cell.rendered .rendered_html {
  overflow-x: hidden; //*auto;
  overflow-y: hidden;
}
```

Written with StackEdit.

피드 구독하기: 글 (Atom)