Atom is so powerful that it blows my mind


So, I was just trying to match my Atom config with my ST3’s and one of those things I really like to have in my text editor is an option to display invisible characters.

FYI in Atom, this is controlled by the “Show Invisibles” checkbox in the Editor Settings (or editor:showInvisibles in your config.cson). I had no problem to find this setting at all. My problem was that the invisible characters are too damn bright by default.

But thanks to the Developer Tools, it didn’t took me long to find what I was looking for…

And thanks to Atom’s styles.less, all I had to do to resolve my problem was to add 3 lines of CSS and hit ⌘S:

How I felt after that? I felt awesome. I had only installed Atom minutes ago.

I didn’t even had to think to fix my problem. All the knowledge I needed was already in my head! It was simple as editing a webpage.

TL;DR: Atom allowed me to fix one simple problem – that I still encounter in most text editors nowadays – in seconds.

What about yours?

Show whitespace characters
Why Atom? Not other Open Source / Web Editor?
Atom vs Smalltalk
Split screen + word wrap

Please tell me you’re going to package this up and share it… and name it dots-everywhere


Where did you get that? Can you please share? cant wait for the public beta.


ST2 & 3 has this opacity dialled down by default, and is only shown when you highlight the line. Prefer it this way, anything else is noise.


Ah, yes, this is one great advantage of using the web platform: everything is easy to customize and edit. This modification, though, should probably be part of the text-buffer package, to which pull requests can be sent, or of the core, depending on which of the two would handle this. I see no reason people would want invisible characters to be that bright and not want them to be less opaque, so this should probably become the default.

Afterword: apparently, the opacity of invisible characters is already reduced, in contrast to what is shown in the first screenshot of the first post. I’m not sure why this is so: perhaps the 0.60.0 update brought this?


Hum, nope. Default opacity is still at 1 for me. I wanted to do a pull request but I don’t see any LESS file in the text-buffer package, so I think it should reside in the core which is not publicly available yet…


It’s defined with color property, not opacity (v0.60.0):

.editor .invisible-character, .editor .indent-guide {
color: rgba(197, 200, 198, 0.2);


Is there a user-specific css file where you can put just the changes you’ve made? I learned long ago in emacs to keep all my customizations clearly separated and in one place


Yes, the file is ~/.atom/styles.less which you can access from Atom’s menu:


Where those lines are coming from? I don’t have that in my editor.less :worried:


I don’t know either :slight_smile: but you don’t need to know to overwrite. Probably in the core though.


Inspect the editor, you can find how the CSS is defined. But yeah, it’s in the core, we don’t have access to these files. Yet? :slight_smile:


OK, so I believe that we’re not using the same syntax theme. I’m using a Base16 one and the opacity is set a 1. I think you are using the default Atom Dark. Am I wrong? :wink:

Actually, we do. Try something like:

$ atom /Applications/

And, voilà! The LESS files are located in /app/static/


Actually, we do. Try something like:

I don’t think you’re understanding what @iam4x is saying - there’s no public repository for the core app with the .less to issue a pull request against.


I assumed that by “access to theses files” he meant “show the files content”. Also we were talking about editor.less, so maybe I misunderstood what @iam4x said, but maybe not.

Thank you, I’m well aware of that (and I believe everybody who reads this discussion platform is too).


I’m trying to do something similar to this, albeit a little different. I want invisible characters to be shown only when the text is highlighted. I tried this:

.editor {
    line-height: 2em;

    .invisible-character {
        opacity: 0;
    .invisible-character::selection {
        opacity: 1;

But apparently the ::selection pseudo-class doesn’t work? Unless I don’t understand something. Any suggestions?

Show invisibles only on text selection
Show distinct Spaces vs. Tabs on highlight, like Sublime Text
Change tabs to spaces

Seems like .invisible-character elements don’t actually get highlighted when you highlight. In the markup, there’s a .selection element within the .underlayer in the .editor that controls the highlighting. So, :selection won’t work, sadly.

Given that, I’m not really sure how to achieve a show-only-when-highlighted effect. Hope this helps, though.


Not quite what you were looking for, but I updated my css to show the white space darker on my current line.

.editor {
  .invisible-character {
    opacity: 0.3;

  .cursor-line .invisible-character {
    opacity: 1;


The way the current highlighting works is by placing a colored box behind the current text. The only solution I can think of right now is by setting the color of the invisible characters to be the same as your editor’s background-color.

.editor-colors {
    background-color: @base03;

.editor {
    .invisible-character {
        color: @base03;


@thgaskell – that’s perfect, works for me. Clever suggestion.