CODEWITHSUNDEEP
lesseditorcustomizationsyntax-highlightingatom-editor
delsin
delsin

Reputation: 323

How to change color of comment marker for Atom editor?

I was able to change color of comment content with

atom-text-editor::shadow .comment {
  color: #E4F4FD;
}

But the color of comment marker stayed unchanged:

enter image description here

How do I change the color of comment marker?

Upvotes: 1

Views: 1527

Answers (2)

mwb9aa
mwb9aa

Reputation: 41

Using ATOM version 1.58.0 on Windows 10, I get a depreciation warning. The short version is:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--.

I had to use:

// Change the color of the comments
atom-text-editor .syntax--comment{ color:#9DA5B3; }
atom-text-editor .syntax--punctuation.syntax--definition.syntax--comment{ color:#9DA5B3; }

Upvotes: 0

Richard Slater
Richard Slater

Reputation: 6378

If you place your cursor immediately to the left of the character you want to style and then press Ctrl-Alt-Shift-P all of the scopes for that character will be displayed in an information box:

Screenshot of Scopes at Cursor

You can then incorporate this into your stylesheet as you have with the body of the comment:

atom-text-editor::shadow {
  .comment {
    color: #E4F4FD;
  }

  .punctuation.definition.comment {
    color: #E4F4FD;
  }
}

Because it is LESS, it is possible to nest classes which will make your style sheet much cleaner.

Upvotes: 3

Related Questions