jupyter notebook html 파일 blog 게시하기

 jupyter notebook 파일을 많이 사용하다 보니 blog에 게시하는 방법에 대해 정리해보았습니다. jupyter notebook에 html 로 변환하는 방법이 존재하고 해당 파일의 소스를 게시하는 방법이 간단하긴 합니다.

그러나 다음과 같은 문제점이 있습니다.

html 로 변환한뒤 우측에 보이는 In, Out 이라고 나오는 부분은 사실 필요하지 않습니다. 

문제점

In[xxx], Out[xxx] 부분이 있게 되면 가로가 좁아져서 많은 데이터가 화면에 표시되지 않음

jupyter notebook 의 html converting 옵션을 찾아봤는데 삭제하는 방법이 없었습니다.(못 찾음)

결국 html 을 분석해서 불필요한 내용을 삭제하는 python 파일을 만들었습니다.

필요하신 분은 적절히 변형해서 사용하시기 바랍니다.

전체 소스

전체 소스는 아래 링크 참고 바랍니다.

sourcecode/jupyter_html_conv.py at main · donarts/sourcecode · GitHub

import sys
import re


def write_file(filename, str_data):
    with open(filename, 'w', encoding="utf-8") as fp:
        fp.write(str_data)
        fp.close()


def read_file(filename):
    with open(filename, 'r', encoding="utf-8") as fp:
        ret_data = fp.read()
        fp.close()
        return ret_data
    return None


test_str = \
    """
This is test string 
   --jp-cell-prompt-width: 64px; ->   --jp-cell-prompt-width: 0px;
 <div class="jp-InputPrompt jp-InputArea-prompt">In&nbsp;[93]:</div> => remove
 <div class="jp-OutputPrompt jp-OutputArea-prompt">Out[93]:</div> => remove
"""


def conv_main(strdata):
    pattern_re = r'<div class="jp-InputPrompt jp-InputArea-prompt">[\w\d\&\;\[\]\:]*<\/div>' \
                 '|<div class="jp-OutputPrompt jp-OutputArea-prompt">[\w\d\&\;\[\]\:]*<\/div>'
    ret = re.sub(pattern_re, "", strdata)
    ret = ret.replace("--jp-cell-prompt-width: 64px;", "--jp-cell-prompt-width: 0px;")
    return ret


if __name__ == "__main__":
    input_file_name = "dataframe.html"
    if len(sys.argv) != 2:
        print(sys.argv)
    else:
        input_file_name = sys.argv[1]
    print(conv_main(test_str))
    print(f"input file:{input_file_name}")
    indata = read_file(input_file_name)
    indata = conv_main(indata)
    write_file(input_file_name+".html", indata)

코드 설명

소스에 대한 설명입니다.

핵심 코드는 아래 입니다.

def conv_main(strdata):
    pattern_re = r'<div class="jp-InputPrompt jp-InputArea-prompt">[\w\d\&\;\[\]\:]*<\/div>' \
                 '|<div class="jp-OutputPrompt jp-OutputArea-prompt">[\w\d\&\;\[\]\:]*<\/div>'
    ret = re.sub(pattern_re, "", strdata)
    ret = ret.replace("--jp-cell-prompt-width: 64px;", "--jp-cell-prompt-width: 0px;")
    return ret

html을 분석해보니 아래 div tag를 삭제하면 In 이라는 부분이 삭제되고

<div class="jp-InputPrompt jp-InputArea-prompt">In&nbsp;[93]:</div>

아래와 같은 형태를 삭제하면 Out 이 삭제되는 효과가 있습니다.

<div class="jp-OutputPrompt jp-OutputArea-prompt">Out[93]:</div>

이것을 정규식으로 검색한 뒤 일치하는 부분에 대해서 공백으로 치환하는 부분이 아래 코드입니다.

ret = re.sub(pattern_re, "", strdata)

In[xxx] 나타난 곳의 width를 줄이는 역할을 하며, 앞에서 영역을 삭제했기 때문에 불필요한 코드입니다.

그러나 정규식 후에 str replace형태로도 치환 가능하다는 것을 보여드리기 위해 넣어봤습니다.

ret.replace("--jp-cell-prompt-width: 64px;", "--jp-cell-prompt-width: 0px;")

사용법

jupyter notebook 파일의 메뉴를 이용하여 html 출력물을 만듭니다.

생성된 출력물을 python 을 이용하여 인자로 입력합니다.

출력물을 소스 보기해서 원하는 블로그에 붙여 넣습니다. 보통은 style위치부터 붙여넣기 해줍니다.

아래는 브라우저 창의 크기가 같게 해놓은 상태에서 변환 전/후 비교 입니다.

저는 In/Out 부분만 삭제 했습니다만, 본인이 원하는 부분이 다를 수 있으니 위 공개된 python 코드를 적절히 변경해서 원하는 출력물이 나오도록 수정 해서 사용하시기 바랍니다.