Please add padding to the gutter line number


#1

Is it possible to have a space between the gutter and the code area? Or at least set a background color of the gutter column the same as the code area? It is much better to the eyes.

Also if you have the line number and tree view hidden, in Atom the code is close to the border of the screen, no whitespace at all, pretty ugly. In sublime there is always a padding (space) to breath.


#2

It’s definetely possible. I did this in my theme:

.gutter {
  margin-right: 2em;
}

#3

Thank you, should be nice if this is a default design approaching, I almost give up on Atom because with default installation didn’t look as pleasing as Sublime is.


#4

All this is up to the theme design. You can create an issue, or even better a pull request, at the repo: https://github.com/atom/atom-dark-ui

By design, the gutter is part of the syntax theme. If you don’t want this, either override this in your personal stylesheet, or look for a theme that has a setting for that. I see you’re using a custom theme in Sublime, I bet you’ll find more and better choices for Atom.


#5

@braver Btw. do you know if it is possible to select the .gutter in CSS by data-grammar ?
You showed me, it’s possible for the whole atom-text-editor scope, I can’t find the correct selector for the gutter.
This works (you showed it in a differnet topic):

/* custom font for markdown */
atom-text-editor[data-grammar="source gfm"],
atom-text-editor[data-grammar="source gfm"]::shadow {
  font-family: "customfont";
}

What would be the selector for the gutter depending on the data-grammar?
this doesn’t work:

.gutter[data-grammar="source gfm"]{ 
  margin-right:10em;
}

#6

The gutter lives inside the atom-text-editor element, so something like this should work:

atom-text-editor[data-grammar="source gfm"] .gutter,
atom-text-editor[data-grammar="source gfm"]::shadow .gutter {
  margin-right: 10em;
}

#7
atom-text-editor .gutter, atom-text-editor::shadow .gutter {
  background: transparent;
}

This little code works for me, I think it is much better, I will try to add a request as Braver suggest.
Thanks.


#8

You can also do this, to only add padding to the editor if there is no gutter.

atom-text-editor,
atom-text-editor::shadow {
  .scroll-view {
    padding-left: 1em;
    box-sizing: border-box;
  }
  .gutter + .scroll-view {
    padding-left: 0;
  }
}

#10
      The gutter lives inside the atom-text-editor element, so something like this should work:

atom-text-editor[data-grammar=“source gfm”] .gutter,
atom-text-editor[data-grammar=“source gfm”]::shadow .gutter {
margin-right: 10em;
}

@olmokramer hm, this doesn’t work.


#11

This works for me:

atom-text-editor[data-grammar="source css less"],
atom-text-editor[data-grammar="source css less"]::shadow {
  .gutter {
    margin-right:10em;
  }
}

#12

Hm… It does work for me. I just literally copied the code I posted above, and it made my gutter/text-editor look horrible! :smiley:


#13

This worked for me too. I can adapt it for CSS and for MD. But… i’d like to use this for other grammars, like LaTeX. I tried to replace “source css less” by “text.tex.latex” — which is the scope that i’ve found — and it doesn’t work. I don’t know why.


#14

You should replace the dots in text.tex.latex with spaces: [data-grammar="text tex latex"]. The language-latex package comes with a few different grammars for latex, though, all using a different scope, so you’ll probably want to replace that with [data-grammar~="latex"]. That will match any text editor that has a data-grammar attribute with the word (surrounded by whitespace) latex in it.


#15

Great ! Thank you for the tip :sunny:


#16

try this one:

atom-text-editor::shadow .scroll-view {
  padding-left: 0;
}

#17

Is it possible to achieve the opposite? I’m want to remove the space between the line-numbers column and the editor pane.


#18

According to the gutter-name attribute, that space is being created by your linter package. You can disable that to get rid of the gap. Or, if you just want to hide it, add this to your stylesheet:

atom-text-editor::shadow .gutter[gutter-name="linter"] {
  display: none;
}