LoginSignup
1
1

More than 3 years have passed since last update.

pyenvで入れたjupyter notebookのフォント幅を等幅にする方法

Posted at

jupyter使っててだんだんイライラしてくるのがフォント幅だと思います。

頑張って等幅にすることができたのでメモっておきます。
OSはMacです。

~/.jupyter/custom/custom.cssを編集する

ぐぐったらまず最初にここを編集しろって言われたんですよ。
でもだめだったんですよ。

で考えたんですよ。
「pyenvで入れてるからここじゃないんじゃね?」
って。

で、そこからハマったわけです。

色々試してみたんですけどね。。。

その結果。

最終的にいじるのは~/.jupyter/custom/custom.cssでした!!

ただここに行き着くまでに僕は、

pip install jupyterthemes
pip install --upgrade jupyterthemes
jt -t onedork -f inconsolata -T -N -cellw 90% -tfs 11

とか叩いてたんです。(ググったらこれでいい感じなるって書いてあったんだもん)

これだけでいけると思ったんです。

実際テーマも変わって見た目めっちゃかっこよくなって、
「うお!これ絶対フォントも・・・治ってないんかーい!!」

はい。

で、ここでもう一度
~/.jupyter/custom/custom.css
を眺めてみたんですよ。

そしたらさっきまでは空っぽだったのになんかすっごい書かれてる!!
多分さっきのjtコマンド叩いたことでテーマが適用されてできたんだと思います。

そう、ここでpyenvで入れてようがここのcssが読み込まれてるってことに気づきました。

で、色々調べてたら、
・div.CodeMirrorがコードを書く部分らしい。
・monospaceってやつを入れると等幅になるらしい。
とか書いてあったので、
~/.jupyter/custom/custom.css
の中を、
div.CodeMirror
で検索かけてみたら、、、

custom.css
div.CodeMirror pre {
 font-family: "Inconsolata-g", monospace, monospace;
 font-size: 11pt;
 line-height: 170%;
 color: #b5c2d9;
}

あった!!!

っていうかmonospaceついてんじゃん!しかも二個!
※フロントの開発をほとんどしたことがないため二個ついている意味はわかりません。

なんでだろうと思ってfirefox(chromeじゃなくてすみません)で要素の検証をしてみたら、たしかにこの属性は取り消し線がついている・・・。

で色々調べた結果。

custom.css
div.CodeMirror pre {
 font-family: "Inconsolata-g", monospace, monospace !important;
 font-size: 11pt !important;
 line-height: 170% !important;
 color: #b5c2d9 !important;
}

って感じで!importantつけたらいけました!!!

めでたしめでたし。

試してないですが、おそらくテーマの適用をするたびcustom.cssは上書きされていくので注意が必要です。

あと、テーマとかいれたくないんだけどって方は、これも試してないのでわかりませんが、上記のcssに、(なければ作って)

custom.css
div.CodeMirror pre {
 font-family: "Inconsolata-g", monospace, monospace !important;
 font-size: 11pt !important;
 line-height: 170% !important;
 color: #b5c2d9 !important;
}

を書けばいけると思います。
"Inconsolata-g"の部分はもしかしたら好きなフォントでもいけるのかな・・・。

以上です

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1