Jupyter Notebookはデータ解析を行う環境においてコード、結果、ストーリ-を同じ場所に残すことができる非常に便利なツールです。  
そのJupyter Notebookで作成したドキュメントをBloggerで表示させる方法について説明いたします。  
参考にするサイトは、"Jupyter NotebookのドキュメントをWordpressに貼り込む""WordPress Blogging with Jupyter Notebook in Five Simple Steps"です。
説明もこれらのサイトに沿って説明いたします。  
*Jupyter NotebookをGistを用いる方法もありますが、限られた画面でしか表示されないみたいなのでここでは紹介いたしません。興味のある方はこちらをどうぞ"GitHub Gistを使ってブログにJupyter(IPython) Notebookを表示する方法"

具体的な手順

手順はほとんど上で挙げた参考サイトと同じです。  
要約すると、Jupyter Notebookで作成したドキュメントをhtmlファイルに変換し、Blogger側でcssをいじります。

(1). Jupyter Notebookでドキュメントを作成し、.ipynbファイルとして保存する。
(2). nbconvertでhtmlファイルに変換する

$ jupyter nbconvert --to html --template basic hoge.ipynb hoge.html

(3). 出力されたhtmlファイルの中身をコピーし、bloggerのPost画面に貼り付けます。
(4). Bloggerのホーム画面にある「Theme」->「customize」->画面左上にある「Advanced」->「Add CSS」をクリックしていくとCSSコマンドを入れるための画面が出てくる。ここの作業は"BloggerでMarkdown書けるようにした。"にある"CSSの追加編集"の項を参考にしてください。
(5). そのCSSを追加する画面に以下のコマンドを追加する。追加することで、Jupyter Notebookの色合いを再現することができる。

/************** Jupyter Notebook CSS ************************/
.input_prompt {
    color: #0066cc;
}
.output_prompt{
    color:#cc0000;
}
.prompt{
    font-family: monospace;
    font-size: 14px;
}
.c, c1 {
    color: #408080;
    font-style: italic;
}
.k {
    color: #338822;
    font-weight: bold;
}
.kn {
    color: #338822;
    font-weight: bold;
}
.mi {
    color: #008800;
}
.mf {
    color: #008800;
}
.o {
    color: #9966ff;
}
.ow {
    color: #BA22FF;
    font-weight: bold;
}
.nb {
    color: #338822;
}
.n {
    color: #000000;
}
.s, .s1 {
    color: #cc2222;
}
.se {
    color: #cc2222;
    font-weight: bold;
}
.si {
    color: #C06688;
    font-weight: bold;
}
.nn {
    color: #4D00FF;
    font-weight: bold;
}

.code_cell pre{
    font-family: "ubuntu mono"; font-size: 120%;
    background-color: #eeeeee;
    padding-left: 1%;
}
.output_area  pre{
    background-color: #FFFFFF;
    padding-left: 5%;
}
.cell pre {
    margin-top: 10px;
    margin-bottom: 10px;
}
br {
    line-height: 2;
}
.cell h1, h2, h3, h4 {
    margin-top: 30px;
    margin-bottom: 10px;
}

.text_cell_render {
    font-family: "Times"; font-size: 120%;
    color: #000000;
}
/************** Jupyter Notebook CSS ************************/

作業を終えて

(4)と(5)の作業は一度設定してしまえば、その後も設定する必要はありません。  
これでBloggerにおいてJupyter Notebookを貼るり付けることができます。  
もしなにか不備があれば、コメントしていただけるとありがたいです。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.