Modify intent guide tab


#1

Hello,

I couldn’t find anything on the web, but I would like to know if it is possible to modify the vertical bar “|” used to show tabs ? I would like to modify the character used, and if possible the colour too.

Thank you very much in advance :slight_smile:


#2

It’s called the indent guide or indentation guide, I think. Maybe that helps you to find more information.


#3

If you’re meaning this:

That’s called the “indent guide” as @kgrossjo said. And it isn’t done using a character, but CSS styling. When you turn on the indent guide, Atom adds the class “indent-guide” to all leading whitespace:

Which you can then style using themes or your styles.less. For example, here is the styling from the one-dark-syntax theme:

And the base definition from Atom itself:

https://github.com/atom/atom/blob/master/static/text-editor-shadow.less#L131-L134


#4

Thank you very much :smile:

So, in other words I’m unable to change it through a character ? I can only modify it via:

.indent-guide{
     display: inline-block;
     box-shadow: inset 1px 0;

}

Thank you very much again for the time taken :smile:


#5

You can use CSS pseudo elements to show a character instead of the vertical line:

@import "syntax-variables";

atom-text-editor::shadow .indent-guide {
  color: transparent;

  &::before {
    color: @syntax-indent-guide-color;
    // change this to the character you want to show
    content: 'X';
    // add some styling for positioning etc.
  }
}

#6

Thank you very much.

I tried to change as @olmokramer said, but it ended with bugs related to the positioning of the cursor.

Thank you very much again for your time :slight_smile:


#7

Ok, try

atom-text-editor::shadow .indent-guide {
  color: transparent;
  position: relative;

  &::before {
    color: @syntax-indent-guide-color;
    // change this to the character you want to show
    content: 'X';
    position: absolute;
    left: 0;
    top: 0;
  }
}

and see the magic happen :star2:


#8

Thank you very much I don’t have any problems now :smile:

Thank you again for all your time :smile: