前の関連記事：linuxBean14.04(77)古いカーネルのバックアップを削除してHDD容量を空ける
GitHub Gistを使ってブログにJupyter(IPython) Notebookを表示する方法ではいろいろ欠点があるので他の方法を考えてみました。
GitHub Gistを使ってブログにJupyter(IPython) Notebookを表示する方法の欠点
欠点1 わざわざ高さを手動で入力しないといけません。
欠点2 わざわざ設定してもChromeとFirefoxで高さが異なりどちらかにしか思ったとおりに表示されません。
欠点3 あとから編集する場合ipynbファイルのJSON編集をしないといけません。
欠点4 表示が遅いです。
欠点1についてなんとかならないかと調べてみましたがGitHub Gistから受け取るiframeの大きさは受け取ってみないとわからないのでBloggerの方で予め高さをちょうどよく設定するのは難しいようです。
このブログではSyntaxhighligtherのスクロールバーをカスタマイズするためにSyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされずでjQueryで高さを測定してから高さを再設定する方法を使っていましたが、描画が遅くなるので使用をやめました。
なのでiframeの高さを毎回測定する方法を採用すると欠点1と欠点2が克服できますが、欠点4がさらに悪化します。
ということで違う方法を考えることにします。
まず思いついたのはローカルで表示しているJupyter NotebookのHTMLソースをそのままブログに貼り付ける方法です。
ソースをみると画像ファイルは画像ファイルのままではなくテキスト化してそのままソースに貼り付けてあるのですごく長いHTMLソースになっています。
CSSファイルとかMathJaxの処理が面倒そうなのでこの方法は諦めました。
jupyter nbconvertでipynbファイルをhtmlファイルに変換する
prooffreader plus: How to quickly turn an IPython notebook into a blog post
ここに上記欠点1から4をすべて克服できるよい方法が紹介されていました。
jupyter nbconvertでipynbファイルをhtmlファイルに変換してそのソースをブログに貼り付ける方法です。
jupyter nbconvert --to html --template full ipynbファイル
ipynbファイルがあるフォルダでこのコマンドを実行すると同じフォルダに同じファイル名のhtmlファイルが作られます。
これらのオプションはデフォルトなので以下のように省略しても同じ結果が得られます。
jupyter nbconvert ipynbファイル
できたhtmlファイルをブラウザで見るとプロットなどの図やMathJaxによる数式も再現されていることがわかります。
それであとはこのhtmlソースをBloggerのHTMLモードに貼り付けて必要なところはBloggerの作成モードで編集するだけです。
そうなのですがこのhtmlソースはすごく長いです。
このブログですでに導入してあるMathJaxのjsファイルへのリンクもあり編集したいのですが、長すぎてBracketsで読み込んでもなかなか反応しません。
jupyter nbconvert --template basic ipynbファイル
Command-Line Usageにあるtemplateオプションでbasicを指定するとHTMLヘッダを除いたシンプルなHTMLファイルが出力されます。
シンプル過ぎて文字コードも指定されていないのでブラウザ開くと日本語が文字化けしています。
<meta charset="utf-8" />これをソースに書けば文字化けは解消しますがブログに貼り付ける場合はどこかにすでにutf-8が指定されているはずなので貼り付ける必要はありません。
prooffreader plus: How to quickly turn an IPython notebook into a blog postにはbasicから元のブログに貼り付けるように最小限のCSSの例が載っていますが私が表示させたいipynbファイルにはまだ修飾が足りませんでした。
Blogger上にJupyter Notebookの出力を再現できるようにCSSを抽出する
試行錯誤した結果、--template fullオプションで出力したHTMLファイルにある2つの部分を貼り付けると --template basicで出力したHTMLを貼り付けるだけでBlogger上にJupyter Notebookの出力を再現できました。
<style type="text/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 .mb { color: #666666 } /* Literal.Number.Bin */
.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 */
</style>
これは入力セルのコードのシンタックスのハイライトと入力セルの背景色の設定をしてくれます。<style type="text/css">
/*!
* IPython notebook
*
*/.ansibold{font-weight:700}.ansiblack{color:#000}.ansired{color:#8b0000}.ansigreen{color:#006400}.ansiyellow{color:#c4a000}.ansiblue{color:#00008b}.ansipurple{color:#9400d3}.ansicyan{color:#4682b4}.ansigray{color:gray}.ansibgblack{background-color:#000}.ansibgred{background-color:red}.ansibggreen{background-color:green}.ansibgyellow{background-color:#ff0}.ansibgblue{background-color:#00f}.ansibgpurple{background-color:#ff00ff}.ansibgcyan{background-color:#0ff}.ansibggray{background-color:gray}div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;display:-moz-box;-moz-box-orient:vertical;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;border-radius:2px;box-sizing:border-box;-moz-box-sizing:border-box;border-width:thin;border-style:solid;width:100%;padding:5px;margin:0;outline:0}div.cell.selected{border-color:#ababab}@media print{div.cell.selected{border-color:transparent}}.edit_mode div.cell.selected{border-color:green}.prompt{padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;display:-moz-box;-moz-box-orient:vertical;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}@-moz-document url-prefix(){div.inner_cell{overflow-x:auto}}div.input_area{border:1px solid #cfcfcf;border-radius:2px;background:#f7f7f7;line-height:1.21429em}div.prompt:empty{padding-top:0;padding-bottom:0}div.unrecognized_cell{padding:5px 5px 5px 0;display:-webkit-box;-webkit-box-orient:horizontal;display:-moz-box;-moz-box-orient:horizontal;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}div.unrecognized_cell .inner_cell{border-radius:2px;padding:5px;font-weight:700;color:red;border:1px solid #cfcfcf;background:#eaeaea}div.unrecognized_cell .inner_cell a,div.unrecognized_cell .inner_cell a:hover{color:inherit;text-decoration:none}@media (max-width:540px){.prompt{text-align:left}div.unrecognized_cell>div.prompt{display:none}}div.code_cell{}div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;display:-moz-box;-moz-box-orient:horizontal;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}@media (max-width:540px){div.input{-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}}div.input_prompt{color:navy;border-top:1px solid transparent}div.input_area>div.highlight{margin:.4em;border:none;padding:0;background-color:transparent}div.input_area>div.highlight>pre{margin:0;border:none;padding:0;background-color:transparent}.CodeMirror{line-height:1.21429em;font-size:14px;height:auto;background:0 0}.CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}.CodeMirror-lines{padding:.4em}.CodeMirror-linenumber{padding:0 8px 0 4px}.CodeMirror-gutters{border-bottom-left-radius:2px;border-top-left-radius:2px}.CodeMirror pre{padding:0;border:0;border-radius:0}.highlight-base,.highlight-variable{color:#000}.highlight-variable-2{color:#1a1a1a}.highlight-variable-3{color:#333}.highlight-string{color:#BA2121}.highlight-comment{color:#408080;font-style:italic}.highlight-number{color:#080}.highlight-atom{color:#88F}.highlight-keyword{color:green;font-weight:700}.highlight-builtin{color:green}.highlight-error{color:red}.highlight-operator{color:#A2F;font-weight:700}.highlight-meta{color:#A2F}.highlight-def{color:#00f}.highlight-string-2{color:#f50}.highlight-qualifier{color:#555}.highlight-bracket{color:#997}.highlight-tag{color:#170}.highlight-attribute{color:#00c}.highlight-header{color:#00f}.highlight-quote{color:#090}.highlight-link{color:#00c}.cm-s-ipython span.cm-keyword{color:green;font-weight:700}.cm-s-ipython span.cm-atom{color:#88F}.cm-s-ipython span.cm-number{color:#080}.cm-s-ipython span.cm-def{color:#00f}.cm-s-ipython span.cm-variable{color:#000}.cm-s-ipython span.cm-operator{color:#A2F;font-weight:700}.cm-s-ipython span.cm-variable-2{color:#1a1a1a}.cm-s-ipython span.cm-variable-3{color:#333}.cm-s-ipython span.cm-comment{color:#408080;font-style:italic}.cm-s-ipython span.cm-string{color:#BA2121}.cm-s-ipython span.cm-string-2{color:#f50}.cm-s-ipython span.cm-meta{color:#A2F}.cm-s-ipython span.cm-qualifier{color:#555}.cm-s-ipython span.cm-builtin{color:green}.cm-s-ipython span.cm-bracket{color:#997}.cm-s-ipython span.cm-tag{color:#170}.cm-s-ipython span.cm-attribute{color:#00c}.cm-s-ipython span.cm-header{color:#00f}.cm-s-ipython span.cm-quote{color:#090}.cm-s-ipython span.cm-link{color:#00c}.cm-s-ipython span.cm-error{color:red}.cm-s-ipython span.cm-tab{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=')right no-repeat}div.output_wrapper{display:-webkit-box;-webkit-box-align:stretch;display:-moz-box;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;z-index:1}div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:2px;-webkit-box-shadow:inset 0 2px 8px rgba(0,0,0,.8);box-shadow:inset 0 2px 8px rgba(0,0,0,.8);display:block}div.output_collapsed{margin:0;padding:0;display:-webkit-box;-webkit-box-orient:vertical;display:-moz-box;-moz-box-orient:vertical;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}div.out_prompt_overlay{height:100%;padding:0 .4em;position:absolute;border-radius:2px}div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000;box-shadow:inset 0 0 1px #000;background:rgba(240,240,240,.5)}div.output_prompt{color:#8b0000}div.output_area{padding:0;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;display:-moz-box;-moz-box-orient:horizontal;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}div.output_area .MathJax_Display{text-align:left!important}div.output_area .rendered_html img,div.output_area .rendered_html table{margin-left:0;margin-right:0}div.output_area img,div.output_area svg{max-width:100%}div.output_area img.unconfined,div.output_area svg.unconfined{max-width:none}.output{display:-webkit-box;-webkit-box-orient:vertical;display:-moz-box;-moz-box-orient:vertical;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}@media (max-width:540px){div.output_area{-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}}div.output_area pre{margin:0;padding:0;border:0;vertical-align:baseline;color:#000;background-color:transparent;border-radius:0}div.output_subarea{overflow-x:auto;padding:.4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1;max-width}div.output_text{text-align:left;color:#000;line-height:1.21429em}div.output_stderr{background:#fdd}div.output_latex{text-align:left}div.output_javascript:empty{padding:0}.js-error{color:#8b0000}div.raw_input_container{font-family:monospace;padding-top:5px}span.raw_input_prompt{}input.raw_input{font-family:inherit;font-size:inherit;color:inherit;width:auto;vertical-align:baseline;padding:0 .25em;margin:0 .25em}input.raw_input:focus{box-shadow:none}p.p-space{margin-bottom:10px}div.output_unrecognized{padding:5px;font-weight:700;color:red}div.output_unrecognized a,div.output_unrecognized a:hover{color:inherit;text-decoration:none}.rendered_html{color:#000}.rendered_html em{font-style:italic}.rendered_html strong{font-weight:700}.rendered_html :link,.rendered_html :visited,.rendered_html u{text-decoration:underline}.rendered_html h1{font-size:185.7%;margin:1.08em 0 0;font-weight:700;line-height:1}.rendered_html h2{font-size:157.1%;margin:1.27em 0 0;font-weight:700;line-height:1}.rendered_html h3{font-size:128.6%;margin:1.55em 0 0;font-weight:700;line-height:1}.rendered_html h4{font-size:100%;margin:2em 0 0;font-weight:700;line-height:1}.rendered_html h5,.rendered_html h6{font-size:100%;margin:2em 0 0;font-weight:700;line-height:1;font-style:italic}.rendered_html h1:first-child{margin-top:.538em}.rendered_html h2:first-child{margin-top:.636em}.rendered_html h3:first-child{margin-top:.777em}.rendered_html h4:first-child,.rendered_html h5:first-child,.rendered_html h6:first-child{margin-top:1em}.rendered_html ul{list-style:disc;margin:0 2em;padding-left:0}.rendered_html ul ul{list-style:square;margin:0 2em}.rendered_html ul ul ul{list-style:circle;margin:0 2em}.rendered_html ol{list-style:decimal;margin:0 2em;padding-left:0}.rendered_html ol ol{list-style:upper-alpha;margin:0 2em}.rendered_html ol ol ol{list-style:lower-alpha;margin:0 2em}.rendered_html ol ol ol ol{list-style:lower-roman;margin:0 2em}.rendered_html ol ol ol ol ol{list-style:decimal;margin:0 2em}.rendered_html *+ol,.rendered_html *+ul{margin-top:1em}.rendered_html hr{color:#000;background-color:#000}.rendered_html pre{margin:1em 2em}.rendered_html code,.rendered_html pre{border:0;background-color:#fff;color:#000;font-size:100%;padding:0}.rendered_html blockquote{margin:1em 2em}.rendered_html table{margin-left:auto;margin-right:auto;border:1px solid #000;border-collapse:collapse}.rendered_html td,.rendered_html th,.rendered_html tr{border:1px solid #000;border-collapse:collapse;margin:1em 2em}.rendered_html td,.rendered_html th{text-align:left;vertical-align:middle;padding:4px}.rendered_html th{font-weight:700}.rendered_html *+table{margin-top:1em}.rendered_html p{text-align:left}.rendered_html *+p{margin-top:1em}.rendered_html img{display:block;margin-left:auto;margin-right:auto}.rendered_html *+img{margin-top:1em}.rendered_html img,.rendered_html svg{max-width:100%}.rendered_html img.unconfined,.rendered_html svg.unconfined{max-width:none}div.text_cell{display:-webkit-box;-webkit-box-orient:horizontal;display:-moz-box;-moz-box-orient:horizontal;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}@media (max-width:540px){div.text_cell>div.prompt{display:none}}div.text_cell_render{outline:0;resize:none;width:inherit;border-style:none;padding:.5em .5em .5em .4em;color:#000;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}a.anchor-link:link{text-decoration:none;padding:0 20px;visibility:hidden}h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible}.text_cell.rendered .input_area{display:none}.text_cell.rendered .rendered_html{overflow-x:auto}.text_cell.unrendered .text_cell_render{display:none}.cm-header-1,.cm-header-2,.cm-header-3,.cm-header-4,.cm-header-5,.cm-header-6{font-weight:700;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.cm-header-1{font-size:185.7%}.cm-header-2{font-size:157.1%}.cm-header-3{font-size:128.6%}.cm-header-4{font-size:110%}.cm-header-5,.cm-header-6{font-size:100%;font-style:italic}
</style>
(2016.4.17追記。セルが右にはみ出る問題と背景色が横スクロールに追随されない問題があったため、linuxBean14.04(106)Bloggerに貼りつけたIPython Notebookの枠がはみ出る問題を修正で横スクロールはやめて折り返し表示に変更したCSSに変更しました。)これはセルの配置と出力セルの背景色、入力セルの枠の設定をします。
(Firefoxで入力セルの一部が表示されない問題に対してdiv.inner_cellのoverflow-x:hiddenをautoに変更しています。この記事の最後の節を参照。2015.10.17追記分も2015.10.21追記分も変更済です。)
6行しかないですが、5行目はすごく長いです。
MarkdownセルでMathJaxでLaTeXの数式を表示させている場合はMathJaxの設定が必要ですが、このブログではすでにMathJax(1)ブログに数式をきれいに表示させる方法で設定済です。
LaTeXの数式を囲む記号はMathJax(3)数式を挟む記号を変更する方法で変更して、行中に式を表示するときは
$$$数式$$$、独立行で表示させるときは$$数式$$にしています。linuxBean14.04(71)IPython3.2.1のNotebookを使うでやったようにJupyter NotebookのMarkdownセルでは行中に式を表示するときは
$数式$、独立行で表示させるときは$$数式$$なので、行中に式を書いている部分は変更が必要です。Jupyter NotebookのCSSをBloggerのガジェットに貼り付ける
Jupyter Notebookはこれからもブログに貼り付ける予定があり、毎回上記のような長いCSSを貼り付けるのは面倒なのでBlogger:SyntaxHighlighter(10)SQL用のSyntaxHighlighter Brushファイルを導入でやったのと同様にしてBloggerのHTML/JavaScriptガジェットに貼り付けてしまいます。
Bloggerのダッシュボードからレイアウトを選択。
適当なところにHTML/JavaScriptガジェットを追加します。
/packer/で圧縮してから貼り付けようとしたのですが、シンタックスハイライトのCSSは圧縮すると動きませんでした。
IPython notebookのCSSは却って大きくなったので、結局どちらもそのままガジェットに貼り付けました。
デフォルトではガジェットはモバイル版では無効なのでBlogger：レイアウト編集(10)ウィジェットのIDを確認する方法でガジェットIDを確認したあと（今回はHTML4でした)テンプレート→HTMLの編集でモバイル版でも有効になるように設定します。
<b:widget id='HTML4' locked='false' mobile='yes' title='' type='HTML'>ウィジェットへ移動でHTML4を選択してHTML4を探したあとmobile='yes'を追加します。
iPod touch6でみると縦だとプロットの図が小さくなりすぎますね。
Outセルのwidthが割合で設定されているのが原因のようです。
横でみると問題ありません。
これであとはjupyter nbconvert --template basic ipynbファイル で変換したHTMLソースをBloggerのHTMLモードに貼り付けるだけです。
（簡単に変換するためのランチャを作成しました。linuxBean14.04(87)ipynbファイルをnbconvertするシェルスクリプトへ。）
linuxBean14.04(76)MySQL5.6からPython3.4で散布図をプロットする
プロットの図のある例。
numpyの配列のブロードキャスト
MathJaxの数式がある例。
自分で埋め込んだ画像の表示はJupyter Notebookに画像を表示させる方法と同様に有効なリンクを貼っておく必要があります。
Firefoxで入力セルの折り返しができていない
これでうまくいったと思いましたがFirefoxで入力セルの内容が折り返しにならずそのまま枠外にでて見えません。
.content {
word-wrap: break-word;
}
要素の検証でみてみるとChromeで動いているこのword-wrapがFirefoxでは動いていません。div.inner_cellに対してFirefoxに対してoverflow-x:hiddenの設定があったのでこれをautoに変更しました。
うーん、そうすると枠外の部分に背景色が表示されずにはみ出たように表示されますね。
これは横幅をFirefoxが教えてもらっていないのが原因のようですが、そもそもword-wrapが効いていないのも同じことが原因のようです、、、
と思ったらdiv.inner_cellのflex-direction: column;を無効にしたら背景色もスクロールされるようになりました。
でもこれを無効にすると長さの短い行の色が短くなり、Chromeではword-wrapが無効になってしまいます。
うーん、結局カッコ悪いですが背景色がスクロールされないままのoverflow-x:autoの設定にしておきます。
CSSは難しいです。
(2015.10.17追記。左の余白が気になったので下記のようにmin-width:14exを削除しました。
.prompt{min-width:14ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}
を以下に変更。.prompt{padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}
)(2015.10.21追記。linuxBean14.04(80)mpld3でツールチップのsvg画像の高さが短く表示されるので、.rendered_html img,.rendered_html svg{max-width:100%;height:auto}とdiv.output_area img,div.output_area svg{max-width:100%;height:auto}の;height:autoを削除しました。
さらにdiv.output_subareaのmax-widthを削除して出力のサブエリアの幅も調整しました。)
参考にしたサイト
prooffreader plus: How to quickly turn an IPython notebook into a blog post
ipython nbconvertを使ってブログにipython notebookを貼り付ける方法。
Converting Notebooks to Other Formats — nbconvert 4.1.0.dev documentation
jupyter nbconvertのマニュアル。
Command-Line Usage
jupyter nbonvertのコマンドラインオプションの解説。
0 件のコメント:
コメントを投稿