Do Not highlight links

[microcoder]

Description

Do Not highlight links on pages after update jupyterlab to 4.3.0

[nthiery]

I confirm that links to other notebooks in rendered markdown cells of Jupyter notebooks are not highlighted as they used to be. So students struggle to realize which pieces of texts are actually links. Links to files still appear (underlined & blue) as usual.

I can't really report which version upgrade caused that, as I was stuck for other reasons with a much earlier version of JupyterLab, and jumped directly to jupyterlab 4.3.4 and jupyterlab-myst 2.4.2 (installed from conda-forge).

This affects both firefox and chrome.

Thanks in advance!

[MordicusEtCubitus]

I do confirm this bug

I have opened a bug for this issue on jupyter lab : jupyterlab/jupyterlab#17232

It contains screenshots of css shown by firefox dev toolbar

$ jupyter labextension list 
JupyterLab v4.3.4
/home/aliquis/miniforge3/envs/JBook/share/jupyter/labextensions
        jupyterlab-myst v2.4.2 enabled OK (python, jupyterlab_myst)
        jupyterlab-plotly v5.24.1 enabled  X
        jupyterlab_pygments v0.3.0 enabled OK (python, jupyterlab_pygments)
        jupyterlab-jupytext v1.4.3 enabled OK (python, jupytext)

[krassowski]

This is because JupyterLab no longer spills styles to embedding application, which is implemented by pre-pending .jp-ThemedContainer class; while this is a good thing it caused a mild breakage in 4.3 because it increased selector specificity. Apologies that we did not pick this one up when testing jupyterlab/jupyterlab#16519 across different extensions.

In JupyterLab links in rendered Markdown are coloured with:

jp-RenderedHTMLCommon a:link {
    text-decoration: none;
    color: var(--jp-content-link-color);
}

which has specificity (0,2,1) which overrides the reset rule:

.jp-ThemedContainer a {
    text-decoration: unset;
    color: unset;
}

that has specificity: (0,1,1)

While myst does ship with a color targeting links:

.myst :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--jp-content-link-color, #1976d2);
  text-decoration: none;
  font-weight: 400;
}

it is very low specificity (0,1,0) - due to use of :where pseudo-selectors - and gets overridden by the .jp-ThemedContainer a.

One solution, documented in https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#jupyterlab-4-2-to-4-3, is to add .jp-ThemedContainer in front (or otherwise increase the selector specificity).

We could also discuss changing the selector upstream in JupyterLab, but that would require some benchmarking too (I am not sure what is the cost of :where, but certainly there is a very high cost of using * at the right hand side.