IPYTHON NOTEBOOKをブログにする方法
今の段階で、私がやっている方法を紹介しておきます。IPYTHON NOTEBOOKによる記述をこのブログ(Blogger)に貼り付ける事にしたのは、その方法を記載したWebページを見つけていたからです。
やるべきことは、IPYTHON NOTEBOOKで作成したファイル(***.ipynb)をHTMLに変換する事です。
変換ソフトはnbconvertと呼ばれています。
先ほどのWebページが書かれた頃、nbconvertはまだ開発段階でした。
現在、ipython1.0が公開されており、nbconvertはipythonの一部として正式版が公表されました。
しかし、その際に仕様が変わっており、先のWebページのやり方は出来なくなっています。
それではどうしたらよいのか、というのがなかなか分かりにくくて、試行錯誤しました。現時点でたどり着いた方法を記述しておきます。ちなみに、私の環境はwindows7で、pythonは2.7です。ipythonの1.0へのバージョンアップについては、別ページで紹介しています。
nbconvertを実行する。
その方法は幾つかある。- 作成した***.ipynbのあるフォルダでコマンドプロンプトを立ち上げ、
ipython nbconvert --to html ***.ipynb --template basic
と打ち込む。
この方法は、正式サイトに書かれています。
ちなみに、コマンドプロンプトを立ち上げる方法はここで紹介されています。 - 1を簡略化する方法として、バッチファイルを作成しておく。例えば、
ipython bconvert --to html %1 --template basic
という一行だけのバッチファイルを作成(名前は何でもよい。例えば、nbconvert.batとか)し、
***.ipynbファイルをこのバッチファイルのアイコンでドラッグアンドドロップする。 - 1と同じ事をipython notebook上で実行する。つまり、ipython notebook上で、!マークをつけ、
!ipython nbconvert --to html ***.ipynb --template basic
とタイプして実行する。この方法だと変換履歴をipynbファイルとして残しておける。
htmlのソースを貼り付ける
Bloggerの投稿画面を開き、HTMLボタンをクリックし、nbconvertが吐き出したhtmlファイルのソースを貼り付ける。
cssをBloggerに登録する。
これも正式サイトに書かれています。肝心なことはipython.min.cssを探す事です。私の場合、
C:\Python27\Lib\site-packages\IPython\html\static\style
にありました。
この場所の途中まではnotebook上で、
from IPython import html
html.DEFAULT_STATIC_FILES_PAT
とやれば分かりますが、正式サイトにあるようなcssというフォルダは見つかりませんでした。
ともかく、このipython.min.cssをエディタで開き、全文をコピーします。
次にこれをBloggerのテンプレートに追加します。
方法はここに紹介されているとおりです。
cssを編集する。
いま登録したばかりのcssの中身を少しだけ編集します。
そのままでは、ブログのタイトルと説明が消えてしまいます。
div#header{display:none;}
という行を見つけ、以下のようにコメントアウトします。
/*div#header{display:none;}*/
消しても良いでしょう。
MathjaxのスクリプトをBloggerに登録する。
なぜか、この方法をダイレクトに紹介しているページが見つかりませんでした。
数式の表示にはMathjaxというjavascriptを使っています。
これを登録する必要があります。
と書かれたボックスの右上の編集という文字をクリックします。ここにjavascriptのタイトルをコンテンツを入れることができます。
タイトルは何でも良いでしょうが、例えばmathjaxとします。
コンテンツは
<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script> <script type="text/javascript"> init_mathjax = function() { if (window.MathJax) { // MathJax loaded MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ] }, displayAlign: 'left', // Change this to 'center' to center equations. "HTML-CSS": { styles: {'.MathJax_Display': {"margin": 0}} } }); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } } init_mathjax(); </script>
としました。これはhtml_full.tplからの抜粋です。
このファイルは私の場合、
C:\Python27\Lib\site-packages\IPython\nbconvert\templates
にありました。
当然ですが、CSSの登録と編集、スクリプトの登録は2回目以降は不要です。
cssに以下のコードを追加しました。
返信削除.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0044DD } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #7D9029 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.highlight .no { color: #880000 } /* Name.Constant */
.highlight .nd { color: #AA22FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0000FF } /* Name.Function */
.highlight .nl { color: #A0A000 } /* Name.Label */
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #666666 } /* Literal.Number.Float */
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
今回のcssの追加においては、下記のサイトを参照しましたが、まだ理解しきっていません。
返信削除pythonコードの色分けは上手くいったようです。
https://github.com/ipython/ipython/issues/4063