Displaying Special/weird Invisible Characters


#1

Is there a way to make special characters more obvious?? In sublime for example if this happened where there is a stupid invisible character it come up as a little block making it obvious that a weird character existed, where as in Atom, there is literally nothing.

If I’m trying to debug some JSON for example and it’s not valid it can often take ages to figure out if some content has got something odd in it.


#2

For clarification: you have Show Invisibles checked, and you want them to be more visible?

The invisible character color is controlled by your syntax theme. The easy way to override it is with a rule in your styles.less that addresses atom-text-editor::shadow .invisible-character.


#3

@lexbi I’ve used the following to good effect for a while now. Tweak to your preference of course.

#atom-nicer-invisibles() {
    // More subtle invisibles for light syntax themes, while
    // retaining more visible invisibles for dark syntax themes.
    atom-text-editor::shadow {
        & when (luminance(@syntax-background-color) < 50%) {
            .invisible-character {
                opacity: 0.9;
            }

            .indent-guide {
                opacity: 0.9;
            }
        }

        & when (luminance(@syntax-background-color) >= 50%) {
            .invisible-character {
                opacity: 0.5;
            }

            .indent-guide {
                opacity: 0.5;
            }
        }
    }
}
#atom-nicer-invisibles;

#4

Hi @DamnedScholar,

Cheers for your message, I’m not sure I have seen a “Show Invisibles” checkbox? I said more visible because atom would see some weird character as a space, but sublime may see it as a block. I’m sorry it’s hard to give examples right now I’m not at my workstation

I will try your suggestion to style it,
Thanks


#5

@lexicalunit This is great thank you I shall give this a go!