How to make the font width of jupyter notebook put in pyenv equal width

I think that font width is getting more and more frustrating when using jupyter.

I tried my best to make it the same width, so make a note of it. The OS is Mac.

Edit ~ / .jupyter / custom / custom.css

I was told to edit here first when I went around. But it didn't work.

I thought about it. "I put it in pyenv, so it's not here, right?" What?

So I got hooked from there.

I tried various things. .. ..

as a result.

The final mess was ~ / .jupyter / custom / custom.css! !!

But by the time I get here,

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

I was hitting it. (It was written that if you googled, this would be a good feeling)

I thought this was all I could do.

Actually, the theme has changed and it looks really cool, "Uh! This is definitely a font ... isn't it cured ?!"

Yes.

So here again ~/.jupyter/custom/custom.css I tried to look at.

Then, although it was empty a while ago, something amazing is written! !! I think that the theme was applied by hitting the jt command earlier.

Yes, I noticed that the css here is loaded even if I put it in pyenv here.

So, after researching various things, ・ It seems that div.CodeMirror is the part where the code is written. ・ It seems that if you put a monospace, it will be the same width. Because it was written ~/.jupyter/custom/custom.css Inside, div.CodeMirror When I tried searching with, ...

custom.css

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

there were! !! !!

I mean, it's about monospace! And two!

• Since I have hardly developed the front, I do not understand the meaning of having two.

I wondered why, and when I tried to verify the element with firefox (I'm sorry it's not chrome), this attribute is certainly strikethrough ...

As a result of various investigations in.

custom.css

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

I was able to add ! Important! !! !!

I'm happy.

I haven't tried it, but be aware that custom.css will probably be overwritten each time you apply the theme.

Also, if you don't want to write a theme, I don't know because I haven't tried this either, but in the above css (if not, make it)

custom.css

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

I think I should write. Maybe the "Inconsolata-g" part can be any font you like ...

that's all