Possible to highlight links in different colors without breaking the links?

Custom CSS & Theme Design
,
1

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

I want to highlight links in different colors. I have the plugin highlightr installed, which works flawlessly to highlight regular text. However, the HTML formatting that wraps around the [[link]] destroys it.

Things I have tried

I’ve searched online and used ChatGPT to build custom CSS snippets, but I couldn’t get it to work.

2

What is the criteria for your links to be highlighted? Is it related to the site is linked to? Is it just random links you want to highlight? Is there any pattern in the link we can use?

If not would you be opposed to adding a tag after (or before) the link to “tag” the link?

3

Hi holroy, thanks for the reply! I’m outlining a project in Obsidian using bullet points but with a lot of text, colorcoding each link in the outline would visually make it much easier to spot what the link refers to.

If using tags at the end or beginning of the link, could you make it so that the tag colors the entire link or will it only color the tag itself?

4

Here is my test text using internal links:

- Text in front of [[Something]] and text after it. [[Anything]]
- Tag in front of #yellow [[Something]] and text after it. [[Anything]]
- Text in front of [[Something]] #green and tag after it. [[Anything]]

With this styling applied to it:

.is-live-preview .cm-line:not(.cm-active) .cm-tag-yellow,
.is-live-preview .cm-line:not(.cm-active) .cm-tag-green,
[href="#yellow"],
[href="#green"] {
    display: none; /* Hides the tag from the view */
}

/* Live preview related to the line */
.is-live-preview .cm-line:not(.cm-active):has(.cm-tag-yellow) {
    & .cm-hmd-internal-link {
        color: var(--color-yellow);
    }
}

.is-live-preview .cm-line:not(.cm-active):has(.cm-tag-green) {
    & .cm-hmd-internal-link {
        color: var(--color-green);
    }
}

/* Reading mode in connection with the link */
[href="#yellow"] + a.internal-link {
  color: var(--color-yellow);
}

a.internal-link:has(+ [href="#green"]) {
  color: var(--color-green);
}

It looks like this in live preview:
image

And like this in reading mode:
image

So as can be seen with this CSS it’s targeting all links within that line in live preview, but we can narrow it down to any given link in reading mode. Due to how much extra stuff there is in the HTML rendering of live preview, I’m not sure if possible or how to narrow it down better. At least not with my CSS knowledge.

You might be able to do something doing stuff like .cm-tag-yellow ~ .cm-hmd-internal-link ~ .cm-hmd-internal-link in combination with variants thereof to reset colors when it’s a not good combination. But it gets tricky very fast… :frowning:

1 Like