Function separator line


#1

Hello Guys,
Last week I did a job and I had to do a long file (a really long file) with a lot of methods and I started to miss a line between the methods.
In my research on the internet I saw it in the PHPstorm, when you type “function” automatically he’s put a line above the function.

I tried to do editing the CSS of my theme, like bellow:

 .line{
  .meta{
    .function{
      .php{
        border-top:1px solid gray;
        padding-top:5px;
      }
      &.js{
        border-top:1px solid gray;
        padding-top:5px;
      }
    }
  }
}

The problem is, the border-top is above the words instead the line.
Someone have an ideia how to put this “methods separator” in the theme and above the line of each method?

Best,


#2

You can insert a pseudo-element that stretches the entire width of the editor:

atom-text-editor::shadow {
  .meta.function::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    background: @syntax-wrap-guide-color;
  }
}

edit: it’s actually better to @import "syntax-variables" in your stylesheet and then use @syntax-wrap-guide-color or something instead of a hardcoded color.


#3

For the heck of it, this is now a package: https://atom.io/packages/method-separator. Not sure if it meets the minimum lines of code to warrant a package :sunglasses: , but perhaps it answers future “how can I do this” questions and make life easier for some.