mathjax

2013年8月27日火曜日

IPYTHON NOTEBOOKをブログにする方法

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を実行する。

その方法は幾つかある。

  1. 作成した***.ipynbのあるフォルダでコマンドプロンプトを立ち上げ、
    ipython nbconvert --to html ***.ipynb --template basic
    と打ち込む。
    この方法は、正式サイトに書かれています。
    ちなみに、コマンドプロンプトを立ち上げる方法はここで紹介されています。
  2. 1を簡略化する方法として、バッチファイルを作成しておく。例えば、
    ipython bconvert --to html %1 --template basic
    という一行だけのバッチファイルを作成(名前は何でもよい。例えば、nbconvert.batとか)し、
    ***.ipynbファイルをこのバッチファイルのアイコンでドラッグアンドドロップする。
  3. 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を使っています。
これを登録する必要があります。
ここここを参考にしました。
Bloggerのレイアウト編集画面を開き、

HTML/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回目以降は不要です。

2 件のコメント:

  1. 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 */

    返信削除
  2. 今回のcssの追加においては、下記のサイトを参照しましたが、まだ理解しきっていません。
    pythonコードの色分けは上手くいったようです。
    https://github.com/ipython/ipython/issues/4063

    返信削除