Outlined selections


I noticed that some in themes the selection area was hardly visible. In some cases the theme had been converted from Sublime Text, which has a selection outline feature that Atom lacks.

Take for instance Rainbow

With some CSS trickery I was able to get some outlines working. It’s available in the package selection-outlines.

But CSS has its limitations. Ideally, the divs that make up the selection region should be replaced by an SVG shape or something, but that’s outside my skill level. Any ideas?

Edit: some further thoughts about why this is important/interesting:

An outline allows you to lower the contrast between the regular background and that of the selection. High contrast makes the selection stand out more, but reduces readability of the code inside that area.


Use a -webkit-filter: drop-shadow(0 0 1px #fff) on the div that contains the various region. The drop-shadow filter, in contrast to the box-shadow property, operates on the resulting pixels of an element, and not only on its box.


Super thanks for that tip. There are so many more tricks you can use if you only have to support Chrome, it’s awesome. This solves the problem perfectly. Would’ve been nice if drop-shadow had support for inset or spread, but I’ll take it :smile:


I was looking into this too - I’m a big fan of Sublime’s selection graphic.
So, my two goals:

  • Having an outline on the selection
  • Limit the selection to only select characters on the line (not the entire line itself).

@braver, your selection-outlines repo is no longer existent… I was wondering if you had any suggestions or anything to point me in the right direction in creating this plugin?


I use outline-selection, which definitely still exists.


My approach used pure css, this looks a bit more robust. @callodacity that would be the most elegant visually. If you want the area to be tight around the characters, you can’t use the selection area divs already provided by Atom. I though of solving this by, for each line, getting the coordinates of the first and last character in the selection, and create an svg path based on those coordinates. And then merge these paths where they touch, for multi-line selections.


Thanks @braver and @DamnedScholar, I’ll look into those possibilities :slight_smile:
I’ll see if I can implement an SVG path and also hide the atom’s selection area divs too.