JupyterNotebookをWordPressでJupyterスタイル表示させる方法

機械学習の学習を進めるために、Jupyter Notebookの結果をWordpressにまとめたくなり、試行錯誤してやってみました。以下は結果です。

Kaggleをやってみよう!タイタニック号の生存者予測

Webの記事を3つ試してみた経緯Jupyterスタイルシートを利用した方法をまとめています。

Jupyter NotebookをWordPressに貼る方法

Webで調べて3つ試してみました。

1の方法が一番手軽で記事も多かったです。確かに、簡単にできたのですが、貼り付けられるサイズが小さくて、見づらく感じ、サイズを調整するためのCSS修正が上手くできず断念しました。

2の方法は、プラグインインストールする際に「ghandic/nbconbert」がGithubでリポジトリが見つからず、断念しました。

3の方法は、いい感じだったのですが、表の出力結果をもっとJupyter Notebookに近づけたくて、CSSを追加するのを、Jupyterのスタイルシートをリンクさせるのに変更しました。

Jupyterスタイルシートで表示させる方法

.ipynbファイルをnbconvertでHTMLに変換

$ jupyter nbconvert --to html --template basic <ipynbファイル>

※Dockerを使用している場合は、Dockerコンテナに入ってコマンドを実行。

nbconvertでHTMLだけでなく、PDFやLaTeXなどにも変換できます。–template basicでミニマムのHTML構造とスタイルを指定しています。詳細は下記をご覧ください。

参考 Using as a command line toolnbconvert document

WordPressのカスタムHTMLにコピペ

上記コマンドで出力されたHTMLファイルのテキストを、WordpressのカスタムHTMLに貼ります。プレビューしてみて、いい感じに表示されていなかったら、jupyterのスタイルに近づけるために、下記テキストを、一番上に一緒に貼ります。

<link rel="stylesheet" href="https://cdn.jupyter.org/notebook/5.1.0/style/style.min.css">

JupyterのCDN(Content Delivery Network、コンテンツ配信ネットワーク)をリンクして、スタイルシートに指定しています。投稿全体のスタイルが変更され、他の投稿とスタイルが若干異なるので、多少の調整が必要になるかもです。