Help us understand the problem. What is going on with this article?

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

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"の部分はもしかしたら好きなフォントでもいけるのかな・・・。

以上です

chatrate
頑張って生きてます。
https://chat-rate.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away