Jupyter notebookをWordpressのBlogや固定ページへ貼り付ける方法についてです.Windows8.1でAnacondaをインストールした環境で確認しています.こちらこちらの記事にあるようにいくつか方法があります.このうち,jupy2wpを使う方法はうまくいきませんでした.そこで,nbconvertを用いることにしました.

Jupyter Notebookでコンテンツを作り,*.ipynbでエクスポートします.次にnbconvertで*.ipynbを*.htmlにコンバートします.Anaconda promptを開き,*.ipynbの存在するフォルダに移動し,以下のようにします.

d:\home\python> jupyter nbconvert --to html --template basic hogehoge.ipynb

同じフォルダにhogehoge.htmlができます.これをWordPressのBlog記事や固定ページのテキスト画面(ビジュアル画面ではない)にコピペで取り込みます.

このままですと美しくないので,Jupyter Notebook用のCSSを追記します.外観を子テーマで管理している場合は,外観⇒カスタマイズ⇒追加CSSに以下のようなCSSを追記します.子テーマで管理していない場合は直接,外観⇒CSSカスタマイズに追記します.

/************** Jupyter Notebook CSS ************************/
.input_prompt {
    color: #0066cc;
}
.output_prompt {
    color:#cc0000;
}
.prompt {
    font-family: monospace;
    font-size: 14px;
}
.input_area pre {
    background-color: #f0f0f0;
}
.inner_cell {
    font-family: monospace;
    font-size: 12px;
}
.output_text {
    font-family: monospace;
    font-size: 12px;
}
.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;
}
.output_area pre {
    background-color: #FFFFFF;
    padding-left: 5%;
}
.code_cell {
    padding-left: 1%;
}
.cell {
    margin-top: 10px;
    margin-bottom: 10px;
}
br {
    line-height: 2;
}
.cell h1, h2, h3, h4 {
    margin-top: 30px;
    margin-bottom: 10px;
}
/************** Jupyter Notebook CSS ************************/