WordPress記事内でJupyterLabのノートブック（ipynbファイル）を表示する

以前はGitHub Gistでのipynbファイルの表示がイケてなく、仕方なくhtml変換して表示させていた。記事にしようと思って手順を整理していたところ、現在（2022/04/17時点）はGitHub Gistでもipynbファイル表示は問題なかった。。

特に不都合がなければGitHub Gistの利用をオススメするが、せっかくやり方を構築したので記事にする。なんからの理由でGitHub Gistを利用できない場合にこのやり方をが使える。

手順

1. ipynbファイルを実行する
2. ipynbファイルをhtmlに変換する
3. htmlファイルをサーバにアップする
4. 記事内からhtmlファイルを読み込む

ipynbファイルをhtmlファイルに変換して、WordPressの記事内でキレイに表示する手順は上記。

sample_iris_.ipynbのファイルをhtml変換して記事内に表示する例。

1行目はipynbファイルを実行している。ipynbファイルは各セルの出力結果も保持するので、全セルを実行しておく必要がある。手動で全セルを実行している場合、この処理は実施不要。

--ExecutePreprocessor.timeout=Noneでタイムアウトの制限をなくしている。タイムアウトのデフォルト値は30秒のため長くしたほうが良い。秒数で指定もできる。（マニュアル）

2行目はipynbファイルをhtmlファイルに変換しているだけ。

htmlファイルができたら、外部から参照できるサーバにアップロードして、iframeで読み込めば完了。

このブログのレンタルサーバはConoHa WINGで、ブログソフトはWordPressを使っている。~/public_html/picscels.site/my-contentディレクトリを作成後、その中にsample_iris_.htmlファイルをアップロードすると、https://picscels.site/my-content/sample_iris_.htmlで参照できる。WordPressの記事内では、カスタムHTMLに上記のように記載すれば、ipynbファイルの内容を表示できる。

見え方比較

GitHub Gist

直リンクでの見え方はコチラ。

html

直リンクでの見え方はコチラ。

半自動化

手順の1から3を自動で実施するipynbファイルが上記。

1セル目は、do_から始まるファイル名を除くipynbファイルを実行する処理。通常のipynbファイルの先頭にdo_はつけないようにしていた。

2セル目は、末尾がアンダースコアで終わるipynbファイルをhtmlファイルに変換する処理。htmlに変換する用のファイルの末尾にはアンダースコアを入れるルールとしていた。

3セル目は、SCPでConoHa WINGサーバにhtmlファイルをアップロードする処理。hostからserver_pathの変数はマスク済み。