u++の備忘録

Jupyter Notebook の CSS 要素を編集する

Jupyter Notebook の CSS 要素を編集する方法に関するTipsです。IPython.core.displayを用いて、次のようにCSS要素を編集できます。

from IPython.core.display import display, HTML
display(HTML("<style>.cm-s-ipython span.cm-comment { color: red; }</style>"))

CSSを当てるClass名については、ブラウザの開発者ツールなどで確認できます。

f:id:upura:20200516005241p:plain

Kaggle Notebook も公開しています。編集ページと公開ページでClass名が異なるので、公開ページでは色が編集されていません。

www.kaggle.com

公開ページでも色を変えたい場合は、公開ページのClass名の要素を変更する次のコードを実行しておくと良いでしょう。

display(HTML("<style>.highlight .c1 { color: red; }</style>"))

www.kaggle.com