Apr 8, 2015

Colored guide lines in Atom

I've been using Atom a lot for projects that do not rely on .NET, it's becoming a very nice editor. One thing I like about it is that it's fairly easy to customize. For example, there's an add-on for Visual Studio that colors the guide lines.

Atom's default for this is a bit dull for my taste. Here's an example here with the Seti theme:

enter image description here

But it's easy to just alter this with a bit of LESS trickery. Open the File menu and click on Open your Stylesheet, then paste in the following:

atom-text-editor::shadow {
  .color-guides(20);
  .color-guides(@total, @i:1) when (@i <= @total) {
    .indent-guide:nth-child(@{total}n + @{i}) {
      @indent-col: rgb(mod(@i * 20 + 50, 150), mod(@i * 2 + 50, 150), mod(@i * 100 + 50, 150));
      box-shadow: inset 1px 0 @indent-col;
    }
    .color-guides(@total, (@i + 1));
  }
}

Save the file, and enjoy colored guide lines:

enter image description here

Comments powered by Disqus