Font information in lab template overriden by user stylesheet

[dakoop]

The pygments preprocessor generates a different DOM structure inside of code cells, and this means that properties like the font-family are not inherited by the text inside of the highlighted code. This means that the fonts designated by JupyterLab themes, for example:

  --jp-code-font-family-default: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --jp-code-font-family: var(--jp-code-font-family-default);

are overridden to use just monospace instead. In index.css, we have the lines

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

which in JupyterLab trigger the font settings for CodeMirror to be inherited in pre blocks. The .CodeMirror .highlight pre has no corresponding style which seems to mean the user stylesheet takes precedence on pre and reverts any Jupyter-specific font settings.

Suggested Fix

Add the following rule to share/templates/lab/index.html.j2 (note that this also changes the padding to match the settings in JupyterLab)

.CodeMirror.cm-s-jupyter .highlight pre {
  /* weird, but --jp-code-padding defined to be 5px but 4px horizontal padding 
     is hardcoded for pre.CodeMirror-line */
  padding: var(--jp-code-padding) 4px;

  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

and remove the following rules in share/templates/lab/index.html.j2

nbconvert/share/templates/lab/index.html.j2

Lines 56 to 58 in ed5140b

	.highlight {
	margin: 0.4em;
	}

nbconvert/share/templates/lab/index.html.j2

Lines 69 to 72 in ed5140b

	.CodeMirror pre {
	margin: 0;
	padding: 0;
	}

Nbconvert version: 6.5.0

[dakoop]

This also affects outputs as well. For that, add

.jp-RenderedText pre {
  line-height: var(--jp-code-line-height);
  font-family: var(--jp-code-font-family);
}