Changing comment colour in Atom editor

Question

I would like to change the colour of comments in the Atom editor. From a bit of googling, I found I can put the following in my .atom/styles.less file:

atom-         


        

Answer 1

To find out the CSS classes of any element you want to style, follow these steps in the editor:

1. Use your cursor to highlight the element you want to inspect. I'm following your example of a double slash (i.e. a comment) here.
2. Press Ctrl+Alt+Shift+P (or Cmd+Alt+P on OS X). A pop-up will tell you all classes of that element. Usually, it's the last line of that notification that is of interest for us. For //, it is comment.line.double-slash.js.
3. Disregard the last dot and everything following it, since keeping it would apply your changes to a specific file type only (js in this case). Now prepend a dot. The remaining string is the element we want to style: .comment.line.double-slash.

Open the .atom/styles.less by opening the command pallette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on OSX) and searching for "Application: Open Your Stylesheet".

Append these lines to .atom/styles.less, if not already present:

atom-text-editor::shadow {
    // custom comment styling goes here
}

Inside the brackets you can place CSS/LESS code for any element you want to customize.

atom-text-editor::shadow {
    .comment.line.double-slash {
        color: #ffffaa;
    }
}

---

Additional advice: you can enumerate element identifiers as a comma-and-space-separated list, if the same changes should apply to them. So if you want to make links the same color as comments, there are two possibilities:

.comment.line.double-slash {
    color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
    color: #ffffaa;
}

or

.comment.line.double-slash, .markup.underline.link.hyperlink {
    color: #ffffaa;
}

With long class names as they are used here, I'd prefer the first option for readability. But that's up to your choice.

Answer 2

Using 1.14.4:

// This styles comment text
atom-text-editor .syntax--comment {
    color: #53FFA1;
}

// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
    color: #008C3F;
}

Answer 3

The syntax is changed in 1.14. Now, you need to use this for changing the comment color

atom-text-editor .syntax--comment {
         color: #228B22;
}