You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
}
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:
are overridden to use just
monospace
instead. In index.css, we have the lineswhich 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 onpre
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)
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
nbconvert/share/templates/lab/index.html.j2
Lines 69 to 72 in ed5140b
Nbconvert version: 6.5.0
The text was updated successfully, but these errors were encountered: