Easy colored underlining

Help
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 have a very low knowledge and understanding level in obsidian, css or other…

I’m searching for the easiest way to have colored underlining in the body of my document.

Things I have tried

In another topic in this forum I have been advised to « look at a plugin like GitHub - PKM-er/obsidian-editing-toolbar: An obsidian toolbar plugin, modified from the Cmenu plugin »

I already have this editing toolbar plugin but in its basic functionnalities, color underlining is not customizable.

Thanks for your replies

2

Unless there’s a plugin I’m unaware of, your best bet is using span classes and CSS. In your note:

<span class="uYellow">hey there I'm yellow</span>

<span class="uGreen">hey there I'm green</span>

and the CSS:

.uYellow {
  text-decoration: underline;
  text-decoration-color: var(--color-yellow); }

.uGreen {
  text-decoration: underline;
  text-decoration-color: var(--color-green); }

Add as many as you like. The uYellow parts can be any text you would like to use.

Screenshot 2023-06-24 at 18.45.04
Screenshot 2023-06-24 at 18.45.041386×664 43.4 KB

And you could use the plugin wrap with shortcuts to make commands and hotkeys for wrapping the selected text in the span classes:

Screenshot 2023-06-24 at 18.44.22
Screenshot 2023-06-24 at 18.44.221164×628 24.9 KB

3

Thank you for your reply.
Looks not difficult.

Here I am at the first step, try to get manually the colored underlyning, as you advised:

  • in my note I have written the span classed example :
<span class="uYellow">hey there I'm yellow</span>
  • in my usual CSS file (currently functional with another CSS code) your advised CSS code
.uYellow {
  text-decoration: underline;
  text-decoration-color: var(--color-yellow); }

At now this doesn’t work.
Where could the problem come from ?

4

Just to be clear: this won’t work in source mode, but works fine in live preview and reading modes.

It shouldn’t matter but, you could try to put these color classes in a different file. Call it cssClasses.css or something. Also, what theme are you using?

5

Ok in a separate file it’s working, I guess in the file I previously used the current code above yours was preventing yours to be applied.
I will try the wrapping step now …

6

It’s possible something in the first file wasn’t closed properly… a missing } or double }}.

Something like that will probably cause rules under it to not work.