Is there a way to display whitespace with CSS snippet?

Is there a way to show whitespace with CSS?

I saw the Show Whitespace plugin, but I would like to do the same thing with a CSS snippet. DeepSeek didn’t help me.

This should do the trick …

/* Whitespace */
.cm-trailing-space-a::before,
.cm-trailing-space-b::before,
.cm-trailing-space-new-line::before {
  content: "·";
  color: var(--list-marker-color);
}

image

Cheers, Marko :nerd_face:

EDIT:
color I choose first grey one on my dark theme :smile: … so it’s up to you to find better!

This doesn’t work for me, idk why.

In Reading or Editing mode? Or none?

Cheers, Marko :nerd_face:

In Editing mode, I changed color to #FFFFFF (I have dark theme)

Disabling all my custom CSS snippet and community plugin didn’t help

Can you try with !important at both content and color:thinking:

Do you see it applied in the inspector?

image

It should be applied to the ::before

image

Cheers, Marko :nerd_face:

The same

Inspector:

What about further down, where you have actual spaces …

Cheers, Marko :nerd_face:

After restarting the PC, it suddenly decided to work, although I rebooted Obsidian several times.

However, working with the plugin is still different from this function. Spaces are displayed only when there are two or more of them (it doesn’t work with one space), and spaces between words in a sentence are also not displayed.

You could try this as well (for the editor):

I wrote about it in my first topic message

I saw the Show Whitespace plugin, but I would like to do the same …

Yes, with CSS, you can’t achieve the same level of quality with all those “hidden signs” as you can with plugins (TS). It’s the way MD is rendered in HTML. Give it a try with the one that @ariehen suggested.

Cheers, Marko :nerd_face:

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