ブログにJupyter(IPython) Notebookの内容を貼り付けたくなったのでGitHub Gistを使ってipynbファイルの内容を貼り付けます。やってみるととても簡単でした。(2015.10.12追記。Jupyter Notebookの全体をブログに表示させたい場合はGistから表示させるよりlinuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法の方がよいです。)
GitHub Gistにipynbファイルをアップロードする
Create a new GistでGitHub Gistにログインします。
あとは右下の「Create secret gist」か「Create pubulic gist」ボタンをクリックするだけでアップロード完了です。
「secret」というのは「非公開」という意味ではなく、GitHubアカウントからたどって見られないという意味であって、リンクを知っていれば誰でもアクセスできます。
左下の「Add file」ボタンをクリックしてファイルをアップロードするのかと思いましたが、このボタンはGit(11)GitHub GistはGitHubより手軽に使えそうでやったように複数のファイルを1画面で表示させる目的のためのものです。
gistの作成ボタンをクリックしたあとはipynbの内容がJupyter Notebookの形式で表示されます。
表示がJupyter Notebookの形式になるだけで、セルの内容が実行できるわけでも、編集できるわけでもありません。
右上の「Edit」ボタンをクリックするとJSON形式であるipynbファイルのソースは編集できます。
GitHub Gistにアップロードしたipynbファイルをブログに埋め込む
表示させたいipynbファイルのGitHub Gistの画面の右にあるEmbed URLのCopy to clipboardボタンをクリックします。
Bloggerの場合ならあとは投稿編集画面のHTMLモードにこれを貼り付けるだけです。
予想していたよりあっけなくできて拍子抜けでした。
ブログに埋め込むGitHub Gistの大きさを調整して縦スクロールバーを消したい、、、未解決
埋め込んだJupyter NotebookのGistを縦スクロールさせず全体を表示させたいです。
Gist -- how to set the height and width of an embedded Gist - Stack Overflow
埋め込んだGistの大きさを変更するのはブログ側のCSSで調整する方法しか見つけられませんでした。
このQ&Aの方法はnbviewerを使ってレンダリングしているIPythonのGistでは幅しか調整できませんでした。
<style type="text/css">
.gist iframe.render-viewer {
height: 730px !important;
}
</style>
レンダリングされたHTMLでnbviewerのレンダリング部分のセレクタを探した結果、.gist iframe.render-viewerでこのように高さを指定すれば埋め込んだGistの高さを調整できることがわかりました。ただし、高さはpxで決めうちしないといけません。
また不要になったスクロールバーを消す方法もわかりませんでした。
この方法の最大の欠点はこのCSSを埋め込んだページのすべてのGistに影響してしまうことです。
つまりそのページの埋め込んだGistの高さがすべて同じになってしまいます。
SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされずでやったようにそれぞれの高さを測定してheigthを設定しなおすことも考えられますが、描画が終わってからの測定になるのでページの表示が遅くなりますね。
Outセルの高さを短縮するのは無理な模様
全体の高さを伸ばしたいのとは逆に今度はOutセルの高さを短縮したくなりました。
ローカルではOutセルの左側をクリックすると縦スクロールが出現しますがGistにいれてipynbではそうはなりませんでした。
Set max-height: px and overflow:scroll in nbviewer (like it is in a notebook) · Issue #260 · jupyter/nbviewer
うーん、これくらいしか参考資料はみつかりませんでした。
結局ブログ側のCSSで設定しないといけないようです。
pandasのパネルのお勉強に埋め込んだGistのOutセルのセレクタを検討しました。
Markdownセルのdivの属性
class="text_cell_render border-box-sizing rendered_html"テキストのみ出力のセルのdivの属性
class="output_text output_subarea output_execute_result"表を出力しているセルのdivの属性
class="output_html rendered_html output_subarea output_execute_result"pandasのパネルのお勉強で高さを調整したいのは表を出力しているセルです。
高さをpxで指定して固定するので、内容が少ないセルにも適用すると空白ができるので、高さの指定を適用するセルはなるべく限定したいところです。
<style type="text/css">
output_html rendered_html output_subarea output_execute_result {
height: 200px !important;
overflow: auto
}
</style>
うーん、ダメです。変化なしです。セレクタを減らしていっても何も変化しないので、結局Gistでのレンダリングしているものにブログ側のcssで上書きするのはできないと判断してあきらめて、ipynbファイルのソースから手動で表を短縮しました。
参考にしたサイト
Create a new Gist
コードの断片を公開するのに便利なGitHub Gist。
参考になりました！ :)
返信削除