How do I edit the appearance of a link?

I would like to change the way links [[ ]] look. Using @pseudometa’s theme as a basis, I’m trying to change them.

For example, to get a blue highlight, I put bold around highlights, so **==hello==** would appear blue, with this code:

span.cm-strong.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-blue);
    color: #222;
}

body > .app-container div.markdown-preview-view strong > mark {
	font-style: initial !important;
	background-color: var(--highlight-blue);
	color: #222;
}

Now I’d like to apply this logic to links, but I can’t figure it out. I tried replacing cm-strong.cm-highlight with cm-link.cm-highlight but that doesn’t work.

I’m trying to use the console/elements to view what class the links use/are, but I’m not sure I’m using it right, or understanding it.
What cm- kind of thing would I have to use for this?

Thanks!

Sorry for the hasty self-reply, but I figured it out. I had missed the (probably obvious) button on the console to inspect elements (I’m new to this). So I figured out that I need to use cm-highlight.cm-hmd-internal-link And now that works :slight_smile:

Edit: In case anyone reads this, I’m still having trouble with this after all. It seems I can have the color applied to highlit links either in edit mode OR in preview mode, but not both.

span.cm-highlight.cm-hmd-internal-link {
    font-style: initial;	
    background-color: var(--highlight-link);
    color: #222;
}

body > .app-container div.markdown-preview-view mark > hmd-internal-link {
	font-style: initial !important;
	background-color: var(--highlight-link);
	color: #222;
}

If I change the last hmd-internal-link to just internal-link the color is applied in preview mode, but NOT in editor mode.

I tried just copying that last block and having one with the hmd and one without but that didn’t work.

Any ideas?
Thanks!

There will be differences, but these are the selectors I use for reading and editing modes:

/* << EDITING link color INTERNAL >>  */
.cm-s-obsidian span.cm-hmd-internal-link {
  font-weight: 400;
  color: var(--linkpink)  !important;
}

/* << READING link color INTERNAL >>  */
.markdown-preview-view .internal-link {
  font-weight: 400;
  color: var(--linkpink)  !important;
}

Angel

1 Like

Perfect, thank you!!
For me it looks like this:

span.cm-highlight.cm-hmd-internal-link {
  /*  font-style: initial; */	
    background-color: var(--highlight-link);
    color: #222 !important;
}

body > .app-container div.markdown-preview-view mark > .internal-link {
     background-color: var(--highlight-link);
     color: #222 !important;
}
1 Like

Thanks for sharing.

Angel

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.