Highlighting spaces, tabs and returns


#1

Take the Whitespace language for example. Is it possible to highlight tabs, spaces and returns using a .cson grammar file to create an Atom result similar to what is seen below? Possibly it could be used to see spaces and tabs properly without having to enable seeing special characters? If it’s possible I think it could be a useful alternative to the language-whitespace addon which only allows for replacing tabs, spaces and returns with the t, s and r characters (respectively). This could provide a more ‘colorful’ approach :smile:.


#2

I would think that enhancing Atom’s built-in invisibles support would probably be the best way to do this. Right now, it uses the same class for most invisibles. But if you could make it differentiate between different types of invisibles, then you could style them like you’re suggesting.


#3

Ok here’s a quick mockup:

'scopeName': 'source.whitespace'
'name': 'Whitespace'
'fileTypes': ['ws']
'patterns': [
  {
    'match': '\t'
    'name': 'whitespace.char.tab'
  },
  {
    'match': '\u0020'
    'name': 'whitespace.char.space'
  },
  {
    'match': '\n'
    'name': 'whitespace.char.return'
  },
  {
    'match': '\r'
    'name': 'whitespace.char.return'
  }
 ]

How can I make these display the colors shown above? (taken from the whitespace repo)


#4

In your styles.less file, it might look something like this:

@import "colors";

atom-text-editor::shadow, :host
{
    .whitespace
    {
        &.char.tab
        {
            color: @blue;
        }
        &.char.space
        {
            color: @red;
        }
    }

etc.