Color current indent guide differently


#1

I haven’t seen any way to enable this, plugin or otherwise, so thought I might ask.

In Sublime, and other editors, there are options to make the last indent guide have a different style, that changes depending on which block you’ve focused. So, say, i could make the last indent of the block I’m currently on display a lighter shade, while other blocks stay the same.

I looked at Multi-color indent guide lines, but that doesn’t seem to do what i want

Any thoughts?


#2

I don’t think there is a concept of a “focussed block” that you can work with without writing a package that does that. You can make the last indent guide stand out (as you’ve found out), or the one your cursor is in, but you can’t replicate the behaviour of sublime with just CSS. I haven’t seen a package for this yet either.


#3

There is the .cursor-line class that gets added to the currently focused line. So you could change the color of the indent guides like this (in Your Stylesheet):

atom-text-editor::shadow .cursor-line .indent-guide {
  box-shadow: inset 1px 0 0 red;
}

Is that what you try to do?


#4

Not quite. The idea is to highlight all guides that match the current indentation level. Not just the line your cursor is in, but in your example all guides inside section should be highlighted.


#5

Oh… ok. Now I understand what you meant with “focussed block”. Yeah, that would be nice.


#6

I think this is what he means, I made it in illustrator so it’s not code. Did anyone find a way to make it like this? I also tried the other tread and it didn’t work.


#7

Installing the package indent-guide-improved should do the trick!


#8

I love your line number, It’s very useful on vim mode , how could I do this ? thank you !


#9

Here is a sample of the style to be more friendly. Install indent-guide-improved and add this style to styles.less from atom:

.indent-guide-improved {
  &.indent-guide-stack {
    background: repeating-linear-gradient(to bottom, rgba(158, 158, 158, 0.2), rgba(0, 0, 0, 0) 2px );

    &.indent-guide-active {
      background: repeating-linear-gradient(to bottom, rgb(1, 162, 226), rgba(0, 0, 0, 0) 2px );
    }
  }
  background: repeating-linear-gradient(to bottom, rgba(158, 158, 158, 0.2), rgba(0, 0, 0, 0) 2px );   
}


#10

This is nice.
Thank’s!