jupyter | | | Search

The CSS code sets font styles for text and code cells, using 'Roboto' as the primary font for text cells and 'Roboto Mono' for code cells, both with a font size and line height of 18 pixels. This overrides any other line height styles to maintain consistency across the cells.

Cell 0


div.text_cell,
div.text_cell_render pre,
div.text_cell_render {
    font-family: 'Roboto', Menlo, Monaco, 'Courier New', monospace;
    font-size: 18px;
    line-height: 18px !important;
}

div.cell.text_cell .CodeMirror,
div.cell.text_cell .CodeMirror pre,
div.CodeMirror pre,
div.CodeMirror-dialog,
div.CodeMirror-dialog .CodeMirror-search-field,
div.terminal-app .terminal {
    font-family: 'Roboto Mono';
    font-size: 18px;
    line-height: 18px !important;
}

What the code could have been:

/* Global typography for text cells */
.text-cell-container {
  /* Font family and size for text cells */
  font-family: 'Roboto', Menlo, Monaco, 'Courier New', monospace;
  font-size: 18px;
}

/* Specific typography for code blocks within text cells */
.text-cell-container.CodeMirror {
  font-family: 'Roboto Mono';
  font-size: 18px;
}

/* Typography for code blocks */
.CodeMirror-pre {
  font-family: 'Roboto Mono';
  font-size: 18px;
  line-height: 18px!important;
}

/* Typography for text cells render */
.text-cell-render {
  font-family: 'Roboto', Menlo, Monaco, 'Courier New', monospace;
  font-size: 18px;
  line-height: 18px!important;
}

/* Add a class for terminals */
.terminal-app.terminal {
  font-family: 'Roboto Mono';
  font-size: 18px;
  line-height: 18px!important;
}

/* TODO: Consider adding a variable for font sizes to make it easier to maintain */

Breakdown of CSS Code

Font Styles for Text Cells

div.text_cell,
div.text_cell_render pre,
div.text_cell_render {
  font-family: 'Roboto', Menlo, Monaco, 'Courier New', monospace;
  font-size: 18px;
  line-height: 18px!important;
}

Font Styles for Code Cells

div.cell.text_cell.CodeMirror,
div.cell.text_cell.CodeMirror pre,
div.CodeMirror pre,
div.CodeMirror-dialog,
div.CodeMirror-dialog.CodeMirror-search-field,
div.terminal-app.terminal {
  font-family: 'Roboto Mono';
  font-size: 18px;
  line-height: 18px!important;
}