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.

[hadesto]

+1 to this issue. it would be great to have link readability improved by having link highlighting back again.

[lrfinotti]

This bug is also affecting me in my current project.

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).

I am sorry for the ignorance, but could you (or someone else) be more explicit on how to implement the fix? (Which file and what exactly to add and where.)

[krassowski]

I am sorry for the ignorance, but could you (or someone else) be more explicit on how to implement the fix? (Which file and what exactly to add and where.)

If I knew how to implement the fix straightaway I would have already opened a PR.

Edit: This is to say, this requires a little bit more consideration of how myst styles get pulled into jupyterlab-myst. Maybe even a shadow DOM should be adopted given the extent of myst styles.

[bsipocz]

Not that you need more +1 here, but I keep running into this and what I see above as "downgrade jupyterlab" workaround is not really practical as it won't propagate well into users' installations.

[connorferster]

Adding a +1 just to keep the issue fresh. Same as above, I am using Jupyterlite 0.6.x and I cannot downgrade the Jupyterlab installation.

[tguilment]

I can provide a temporary "fix" the time this get corrected by the jupyterlab-myst team.
As @krassowski said, it is possible to use .jp-ThemedContainer and re-installed the jupyterlab-myst extension.

The idea is to change the CSS file that will display the MyST links in the browser when using Jupyterlab.
For jupyterlab-myst, looking at the github repository (https://github.com/jupyter-book/jupyterlab-myst), we can see the style folder containing the base.css style.

The idea is, at the end of this file, to hard-code the wanted style like so:

/* Hard-code MyST links to light blue */
.jp-ThemedContainer .myst :where(a),
.jp-ThemedContainer .myst :where(a):visited {
  color: #0074d9 !important;      /* bright blue   */
  text-decoration: none; /*underline !important; */
}

.jp-ThemedContainer .myst :where(a):hover {
  text-decoration: none; /*underline !important; */ /* keep underline on hover        */
}

• color: #0074d9 is light blue, but you can choose the color you want (see the color palette https://encycolorpedia.com/0074d9)
  Note that the !important forces the value to win if some later style tries to override it (e.g. JupyterLab themes)

• The text-decoration controls underline/overline/line-through. none means it is just blue whereras underline will underline the links.

I forked the jupyterlab-myst with the change in jupyterlab-myst/style/base.css (as explained above). Now, for you to install the fix in you python virtual environment, follow these steps:

I assume that you have a Python virtual environment with Jupyterlab and pip installed in it.

1 - Download or git clone my jupyterlab-myst fork repository https://github.com/tguilment/jupyterlab-myst (you can also get the original repository and do the changes yourself at https://github.com/jupyter-book/jupyterlab-myst)

2 - The goal will be to:
i) If not done, change the jupyterlab-myst/style/base.css file adding the theme you want at the end:

/* Hard-code MyST links to light blue */
.jp-ThemedContainer .myst :where(a),
.jp-ThemedContainer .myst :where(a):visited {
  color: #0074d9 !important;      /* bright blue   */
  text-decoration: none; /*underline !important; */
}

.jp-ThemedContainer .myst :where(a):hover {
  text-decoration: none; /*underline !important; */ /* keep underline on hover        */
}

ii) Once this is done, activate your python virtual environment et cd inside jupyterlab-myst
iii) Install the package with pip install -e . (with . the current folder path to be jupyterlab-myst)
iv) Create dependencies and build the extension using the jlpm tool (should be already working when pip and jupyterlab are installed)

jlpm install
jlpm build

v) Update the Jupyterlab extension by executing jupyter labextension develop . --overwrite

Now, when running Jupyterlab and refreshing the page, you should have light blue links.

Let me know how it goes.

Hope that helps.

[bsipocz]

I can provide a temporary "fix" the time this get corrected by the jupyterlab-myst team.
As @krassowski said, it is possible to use .jp-ThemedContainer and re-installed the jupyterlab-myst extension.

Could you please open this as a PR?