How do I change the font size of code output in a Jupyter Notebook within the notebook itself?

Notebook
1

I have a set of Jupyter Notebooks (v5.4.0) that I store on GitHub so that users can access them through Binder.

I would like to reduce the font size of the output of code blocks for the user. All information I can find on changing the font size relates to changing the custom.css file. This file changes what I see in my own browser, but it is not part of the repo, cannot be pushed to GitHub, and is not served by Binder, so altering this file does nothing for what my users see.

Is there a way to change the output font size that’s native to the notebook itself and would therefore survive being channeled through GitHub and Binder?

1 Like
2

I think you should be able to include the custom.css in your repository so that it gets used when you start your reopsitory on mybinder.org.

Your repository ends up as the home directory of the user. This means files that live at ~/.jupyter/ on your local machine should go to .jupyter/ in your repository and should be taken into account when your binder starts.

3

Thanks for the response!

I created a .jupyter/ folder in the repo and added .jupyter/custom/custom.css with the content

div.output pre {
    font-size: 9pt;
    color: red;
}

I then pushed this to the GitHub repo and viewed the result through Binder. It successfully turned the text red, indicating the CSS was recognized, but it didn’t change the font size at all (I also tried 3pt just to be sure).

Is there anything else I can try?

1 Like
4

My guess is that if the custom.css is being picked up but the font size doesn’t change it is because font-size isn’t the right rule/property. I’d investigate with the dev console of your browser to see what you have to do there to change the font size.

5

betatun is correct - you can dig these settings out of your browser’s inspector tool and them to your custom.css (likely ~/.jupyter/custom/custom.css):

/* Change output font size*/
.rendered_html table{
font-size: 16px !important;
}

A few other formatting tweaks, in case you’re interested:
/* Change inner background (for code) */
div.input_area {
background: white !important;
font-size: 16px !important;
}

/* Change global font size (for code) */
.CodeMirror {
font-size: 16px !important;
font-family: monospace;
}

/*These homogenize the colors of various code elements to black (they render better printed) */
.cm-s-ipython span.cm-negative {color: black;}
.cm-s-ipython span.cm-positive {color: black;}
.cm-s-ipython span.cm-keyword{color: black;}
.cm-s-ipython span.cm-comment{color: black;}
.cm-s-ipython span.cm-string{color: black;}
.cm-s-ipython span.cm-string-2{color: black;}
.cm-s-ipython span.cm-punctuation{color: black;}
.cm-s-ipython span.cm-number{color: black;}

1 Like
6

Another option is to try adding the !important tag to your CSS rule, in case it’s being over-ridden by another rule. That’s generally discouraged in web development but I think in this case it’s reasonable to try.