CODEWITHSUNDEEP
cssatom-editor
N. Virgo
N. Virgo

Reputation: 8449

Changing comment colour in Atom editor

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-text-editor::shadow .comment {
    color: #ffffaa;
}

That's great - now I have bright yellow comments that demand to be noticed rather than fading into the background. The trouble is that it now looks like the below

enter image description here

As you can see, the text colour of the comments has changed, but the comment delimiters and links within comments remain in the default almost-invisible-grey, which looks a bit silly.

My questions are (1) how can I change the colour of these items, and more importantly (2) where can I look up how to change the colour of these items?

Please note that I am not a web programmer and know nothing of CSS or any related technologies. I am therefore looking for a fairly step-by-step solution, in contrast to solutions found, for example, in the answers to this question, which assume a substantial amount of background in the inner workings of this stuff.

Upvotes: 29

Views: 22996

Answers (4)

Martin Smith
Martin Smith

Reputation: 4087

An update to @Hexaholic's now out-dated answer:

Find the CSS class of the element you want to style

  1. Launch the Developer Tools window using Ctrl+Shift+i (Windows; command: window:toggle-dev-tools)

  2. Activate the Element Inspector (Ctrl+Shift+C from within the developer tools window, or click the cursor icon)

Element inspector

  1. Hover over the element you wish to style

Inspecting an element

  1. Identify the appropriate style name: each style name begins with a dot and proceeds to the next dot. This example applies the styles .syntax--comment, .syntax--block and .syntax--bibtex.

Apply custom CSS

  1. Open the custom stylesheet .atom/styles.less ("Application: Open Your Stylesheet" in the command finder (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P, OSX)

  2. Enter the appropriate CSS. For example, to colour all comments:

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

Or to colour all comments also tagged as bibtex:

atom-text-editor .syntax--comment.syntax--bibtex {
  color: #ffffaa;
}

As usual with CSS, more specific comments (as the latter) will override more general classes (as the former).

Further reading

Upvotes: 4

basiphobe
basiphobe

Reputation: 589

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;
}

Upvotes: 32

Mojtaba Komeili
Mojtaba Komeili

Reputation: 537

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;
}

Upvotes: 14

Hexaholic
Hexaholic

Reputation: 3373

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.

Upvotes: 20

Related Questions