Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Different font settings for editing code and markdown cells in the Jupyter Notebook

In the Jupyter notebook, I would like to use the regular Ubuntu font when editing markdown cells and UbuntuMono for code cells. I can change the fonts of both these cell types simultaneously by editing .jupyter/custom/custom.css like so:

.CodeMirror pre {
    font-family: "Ubuntu Mono", monospace;
    font-size: 14pt;
}

I can also change the formatting of the headers in the markdown code cells:

.cm-header {
    font-size: 110%;
    font-family: "Ubuntu";
}

As well as how the text looks when rendered (after executing a markdown cell):

div.text_cell_render {
    font-family: "Ubuntu";
    font-size: 12pt;
}

However, I don't understand which css classes I could use to discriminate between code cells and paragragh/body text in markdown cells in edit mode. I tried the object inspector in Firefox, but the input text for both cell types show up with the same span tags and css classes. I have tried many of the combinations listed here, but it seems like I just can't find the right one, any ideas?

like image 837
joelostblom Avatar asked Sep 30 '17 16:09

joelostblom


People also ask

How do I change the markdown font size in Jupyter Notebook?

“markdownCellConfig”:{“fontSize”: changes the markdown editor display as you are editing. Increase it dramatically and then edit your markdown cell.

How do you edit a markdown cell in Jupyter Notebook?

Just double click on the markdown cell. Edit what you want to and Run. It will reflect the changes. Save your notebook.

How do you change the font on a Jupyter Notebook?

Jupyter Notebook font size names and its option names. If you want to change the text cell font and font size you can type the following in a cell and hit shift+enter. Don't forget to refresh your browser for the change to take place. You can find all the font types here.

Do Jupyter notebooks have code cells and markdown cells?

Recall that a Jupyter Notebook file consists of a set of cells that can store text or code. Text Cells: Text cells allow you to write and render Markdown syntax. This is where you can describe and document your workflow. Code Cells: Code cells allow you to write and run programming code (e.g. Python ).


1 Answers

I received a reply from the Jupyter Notebook issue linked in the comments of my questions here. It is possible to combine CSS selector, so the following solves my problem:

.text_cell .CodeMirror pre {
    font-family: "Ubuntu";
    font-size: 12pt;
}
like image 110
joelostblom Avatar answered Sep 22 '22 03:09

joelostblom