Jupyter Markdown hyperlink with <style> does not show color

Question

Can someone help explain what is going on, and how to fix it so I don't have too put a <span> in every link.

I am actually writing some .md files and using Juypter to display it in its final form. The markdown (.md) file has many links. The following code shows the problem inside the Jupyter cell. I researched this problem and many say to use <style> and one said to use <span> per link. The <style> doesn't work.

NOTE: When I use markdown directly within a Jupyter cell the links show as blue. It is only when I use the IPython.display(Markdown()) that it fails

The <span> works but means messing up the md file.

Why doesn't link2 simply show up with green? And how can I override all links within markdown.

from IPython.display import Markdown

Markdown('''<span style="color:blue">[This is a blue link](https://example.com)</span>
<br>XXXX
<style>
a { color:blue}
</style>
[This is a green link2](https://example.com)
''')

The output is
output - green link is black, hover is active link

Here is the generated HTML(without CSS)

<div>
    <div>
        <p>
            <span class="jp-RenderedHTMLCommon not-prose">
                <span style="color:blue">
                    <a href="https://example.com" rel="nofollow">This is a blue link</a>
                </span>
            </span>
            <span class="jp-RenderedHTMLCommon not-prose"><br></span>
            <span class="jp-RenderedHTMLCommon not-prose"></span>
            <p>
                <a target="_blank" href="https://example.com" rel="noreferrer">This is a green link2</a>
            </p>
        </p>
    </div>
</div>

You had mentioned doing some research about this and finding what I think is outdated advice. For the sake of others following in you footsteps, can you link to any questions on StackOverflow advising using <style>/<span>-approaches in Jupyter for this? I'd like to update them to include current information. I tried looking around and wasn't finding examples easily. Or maybe it was just HTML advice in general you were referencing? — Wayne
– Wayne, Commented Oct 28 at 14:33

Wayne · Accepted Answer · 2025-10-28 20:49:13Z

If I am understanding correctly, you want to customize your CSS to display hyperlinks green in Jupyter.

Option A:

See Applying Custom CSS for how to make the custom css file at /custom/custom.css.
The current version of that pasted here to save you the jump:

"To apply custom CSS, you can add a /custom/custom.css file in the jupyter config directory. You can find the path, ~/.jupyter, to this directory by running jupyter --paths. There you can create a folder named custom and create a custom.css file within the folder."

You'd want something like this in the custom CSS:

    /* Change color of unvisited links */
    .jp-RenderedHTMLCommon a:link {
        color: #228B22 !important; /* forest green */
    }

(Maybe jp-RenderedHTMLCommon not-prose since you have that?)

I think here discusses this more generally, too.

Current Jupyter Notebook is built on JupyterLab components and so you should be able to do the same thing even if you are using Jupyter Notebook version 7+. (This thread on the Jupyter Discourse Forum discusses this, too, and says much the same thing.)

Option B:

Want to do the CSS modifying from within in a notebook?
You can run this in a code cell at the top of your notebook to test things without altering that CSS file:

(I WOULD SUGGEST TRYING THIS IN SESSIONS LAUNCHED BY clicking 'launch binder' here so you don't mess up your own Jupyter yet!)

%%html
<style>
:root {
  .jp-RenderedHTMLCommon a:link {
        color: #228B22 !important; /* forest green */
    }
}
</style>

Run that cell and your links in that JupyterLab session on the remote system will henceforth turn green.

(Code you can run after to test:

from IPython.display import display, HTML
display(HTML("""<a href="https://google.at">link</a>"""))

)

That %%html cell is based on the advice here. And here, also in the Jupyter Discourse Forum. Note that in those two places this is emphasized for your own use/hacking/trying things. It's not the way you'd do it in full-fledged development, see here for more on that.

After running that %%html cell, I was able to restore the session launched from here to blue links by restarting the kernel. YMMV. And you may find it helpful to do hard browser refresh on the page after you restart the kernel(?).

Modern Jupyter is built on fancier frameworks which result in it being more resistant to more direct tricks/hacks that worked in the past. You have to play nicer with it when going off the standard path.

In this specific case, Jupyter is set to render links as defined in the CSS. Even if you try to use links in programmatically-generated HTML, Jupyter overrides it and makes them blue. You have to actually adjust the CSS settings and not just try to directly wrap the text with HTML you think will override the settings.

Another way to say this in general: If you are researching things, you'll want to only focus on modern answers. Jupyter has changed a lot over the years and there is a lot of outdated information out there.

Collectives™ on Stack Overflow

Jupyter Markdown hyperlink with <style> does not show color

1 Answer 1

Option A:

Option B:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option A:

Option B:

Comments

Your Answer

Sign up or log in

Post as a guest

Related