前の関連記事：linuxBean14.04(156)Eclipse4.6にGit管理のプロジェクトを取り込む
Jupyter NoteBookのセルのCSSを抽出する
まずJupyter Notebookのipynbファイルをfullでhtml出力します。
jupyter nbconvert --to html --template full ipynbファイル
出力されたhtmlファイルのなかでセレクタが.highlightのCSSがコードのシンタックスハイライト、.ansi-から始まるCSSが出力のエラーなどのハイライトですのでその部分を抜き出します。
<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 .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.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 .sa { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
.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 .fm { color: #0000FF } /* Name.Function.Magic */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .vm { color: #19177C } /* Name.Variable.Magic */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
</style>
<style type="text/css">
/* Temporary definitions which will become obsolete with Notebook release 5.0 */
.ansi-black-fg { color: #3E424D; }
.ansi-black-bg { background-color: #3E424D; }
.ansi-black-intense-fg { color: #282C36; }
.ansi-black-intense-bg { background-color: #282C36; }
.ansi-red-fg { color: #E75C58; }
.ansi-red-bg { background-color: #E75C58; }
.ansi-red-intense-fg { color: #B22B31; }
.ansi-red-intense-bg { background-color: #B22B31; }
.ansi-green-fg { color: #00A250; }
.ansi-green-bg { background-color: #00A250; }
.ansi-green-intense-fg { color: #007427; }
.ansi-green-intense-bg { background-color: #007427; }
.ansi-yellow-fg { color: #DDB62B; }
.ansi-yellow-bg { background-color: #DDB62B; }
.ansi-yellow-intense-fg { color: #B27D12; }
.ansi-yellow-intense-bg { background-color: #B27D12; }
.ansi-blue-fg { color: #208FFB; }
.ansi-blue-bg { background-color: #208FFB; }
.ansi-blue-intense-fg { color: #0065CA; }
.ansi-blue-intense-bg { background-color: #0065CA; }
.ansi-magenta-fg { color: #D160C4; }
.ansi-magenta-bg { background-color: #D160C4; }
.ansi-magenta-intense-fg { color: #A03196; }
.ansi-magenta-intense-bg { background-color: #A03196; }
.ansi-cyan-fg { color: #60C6C8; }
.ansi-cyan-bg { background-color: #60C6C8; }
.ansi-cyan-intense-fg { color: #258F8F; }
.ansi-cyan-intense-bg { background-color: #258F8F; }
.ansi-white-fg { color: #C5C1B4; }
.ansi-white-bg { background-color: #C5C1B4; }
.ansi-white-intense-fg { color: #A1A6B2; }
.ansi-white-intense-bg { background-color: #A1A6B2; }
.ansi-bold { font-weight: bold; }
</style>
このCSSをjupyter nbconvert --template basic ipynbファイル で出力したHTMLを適用するとこんな風になりました。
出力セルのエラーメッセージもハイライトされています。
Jupyter NoteBookのセル外のCSSを抽出する
linuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法ではこの部分のCSSが膨大なのでもう少し絞れるかやってみました。
コメントをみながら入力セルと出力セル部分だけ抽出しました。
forJupyterNotebook.css(このGistは以下のエラーは修正済です）
ということでこれで完成です。
linuxBean14.04(128)Closure StylesheetsでCSSを圧縮するのClosure Stylesheetsで圧縮してこのブログに導入しました。
java -jar ~/closure-compiler/closure-stylesheets.jar input.css > output.min.css
うーん、エラーがでてきて圧縮できませんね。
Releases · google/closure-stylesheets
とりあえずここからclosure-stylesheets.jarを1.2.0から1.4.0にアップグレードしましたが結果は変わりません。
pq@pq-VirtualBox:~/_tmp$ java -jar ~/closure-compiler/closure-stylesheets.jar forJupyterNotebook.css > forJupyterNotebook.min.css WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 69 column 4: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 70 column 4: box-align: stretch; ^ Detected multiple identical, non-alternate declarations in the same ruleset. If this is intentional please use the /* @alternate */ annotation. border-left-color:[#e3f2fd] in forJupyterNotebook.css at line 99 column 2: } ^ user-select is an unrecognized property in forJupyterNotebook.css at line 148 column 4: user-select: none; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 167 column 4: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 168 column 4: box-align: stretch; ^ WARNING for use of CSS property box-flex: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 176 column 4: box-flex: 1; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 204 column 4: box-orient: horizontal; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 205 column 4: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 251 column 4: box-orient: horizontal; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 252 column 4: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 268 column 3: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 269 column 3: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 306 column 4: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 307 column 4: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 338 column 4: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 339 column 4: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 372 column 4: box-orient: horizontal; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 373 column 4: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 410 column 4: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 411 column 4: box-align: stretch; ^ WARNING for use of CSS property box-orient: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 427 column 3: box-orient: vertical; ^ WARNING for use of CSS property box-align: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 428 column 3: box-align: stretch; ^ WARNING for use of CSS property box-flex: The flexbox spec has changed and this property is no longer supported. in forJupyterNotebook.css at line 452 column 4: box-flex: 1; ^ 2 error(s), 22 warning(s)12行目と16行目にエラーがでています。
12行目はborder-left-colorプロパティが二つも設定されていたので上の行のborder-left-colorプロパティを削除しました。
16行目はuser-selectが何かわからないということなのでもう削除しました。
他はflexボックスに関するプロパティの警告です。
確かにあまり見たことがないプロパティです。
面倒なのでとりあえず警告がでているものをすべて削除してしまいました。
テストブログでは問題なかったのでこのブログにそのまま導入しました。
、、、おっとっと、linuxBean14.04(106)Bloggerに貼りつけたIPython Notebookの枠がはみ出る問題を修正と同じ問題が発生してしまいました。
div.input_area > div.highlight > pre {
margin: 0px;
border: none;
padding: 0px;
background-color: transparent;
white-space: pre-wrap;
}
white-space: pre-wrap;を追加してウェブバージョンでは解決しました。ただし、Chromeで出力セルのスクロールバーが表示されません。
モバイルバージョンをiPod touchの縦画面でみると出力セルが幅が狭く表示されてしまいます。
横画面では入力セルと幅が揃って問題ありません。
( 2017.3.29追記。左の幅が広すぎるので.prompt セレクタ内のmin-width: 14ex;をコメントアウトしました。そうすると出力セルが左寄りになるのでdiv.output_subareaセレクタの max-width: calc(100% - 14ex);もコメントアウトしました。これによって上記のモバイルバージョンで出力セルの幅が狭く表示される問題は解決しました。)
参考にしたサイト
Releases · google/closure-stylesheets
CSSの圧縮ツール。圧縮するだけでなく文法もチェックされます。
0 件のコメント:
コメントを投稿