Jupyter NotebookをWordPressへ貼り込む方法(Windows)
Jupyter notebookをWordpressのBlogや固定ページへ貼り付ける方法についてです.Windows8.1でAnacondaをインストールした環境で確認しています(2017年12月24日追記:Windows 10で確認済み).こちらやこちらの記事にあるようにいくつか方法があります.このうち,jupy2wpを使う方法はうまくいきませんでした.そこで,nbconvertを用いることにしました.
まず,Jupyter Notebookでコンテンツを作ります.各見出しは「[cci]###[/cci]」で作るときれいです.In[ ]とOut[ ]のセルの横幅は最大長が固定なので,長い場合は改行しておきます.これを[cci]*.ipynb[/cci]でエクスポートします.次に[cci lang='python']nbconvert[/cci]で[cci]*.ipynb[/cci]を[cci]*.html[/cci]にコンバートします.Anaconda promptを開き,[cci]*.ipynb[/cci]の存在するフォルダに移動し,以下のようにします.
[cc lang="batch"]
> jupyter nbconvert --to html --template basic hogehoge.ipynb
[/cc]
同じフォルダにhogehoge.htmlができます.このhtmlのトップ見出しをWordPressのページタイトルにコピーし,htmlのトップ見出しは削除します.このhtmlをWordPressのページのテキスト画面(ビジュアル画面ではない)にコピペで取り込みます.
このままですと美しくないので,Jupyter Notebook用のCSSを追記します.外観を子テーマで管理している場合は,外観⇒カスタマイズ⇒追加CSSに以下のようなCSSを追記します.子テーマで管理していない場合は直接,外観⇒CSSカスタマイズに追記します.表のデザインがいまいちですが.
[cc lang="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 ************************/
[/cc]
“Jupyter NotebookをWordPressへ貼り込む方法(Windows)” に対して2件のコメントがあります。