How to change TODO highlight in atom editor

12
votes

In my opinion the higlighting of a TODO "flag" in the atom editor is too weak/unobtrusively.

How can I change this? I DON'T wanna list the todos in a sidebar (https://atom.io/packages/todo-show).

Here to compare:

In Vim editor there is very strong highlighting (desired): enter image description here

In Atom editor: enter image description here

The main problem is, that atom highlights many other code words in this color...

1
editorhighlightatom-editortodo

1 Answers

30
votes

As GitHub's Atom Editor is built around HTML5 and CSS3 you can very easily change your style sheet, I've done a little recording on how to make this specific change below although you can apply the same principals to any styled element within the editor:

Screen Capture of Style Configuration taking the Shadow DOM into account

Step by Step

The first thing you will need to do is find an instance of the element you want to style, in this case I created a new, empty, file with the text //TODO: is too subtle.

  1. You now need to find the appropriate selector for the word TODO, simply place your cursor in between the letters of the word TODO and press CtrlAltShiftP or select Editor: Log Cursor Scope from the command palette.
  2. The selectors that apply to that location are listed from the least specific at the top to the most specific at the bottom, in this case you want the most specific selector at the bottom, go ahead and copy that into your clipboard.
  3. Next you need to open your personal stylesheet, you can do this by selecting "Edit" and then "Stylesheet...", you can also choose Application: Open Your Stylesheet from the command palette.
  4. Scroll to the bottom of the Stylesheet and paste in your selector from Step 2, you will need to add a period (full-stop) at the beginning to make this a valid selector.
  5. Go ahead and add your preferred styling such your VIM style preference:
    atom-text-editor::shadow .type.class.todo {
      background-color: yellow;
      color: black;
      font-style: normal;
    }
  1. Finally save your stylesheet and switch back to your test document to see the resulting changes.

Thanks to zypro for pointing out that my original answer didn't account for the use of the Shadow DOM in recent versions of Atom.

Update: At some point, Atom got rid of the Shadow DOM. I'm using version 1.34.0 which takes the following entry in the above-mentioned stylesheet:

atom-text-editor.editor .syntax--type.syntax--class.syntax--todo {
    background-color: yellow;
    color: black;
    font-style: normal;
}

Also, for Python (and some other languages) you will need to uncheck "Use Tree Sitter Parsers" in the Core settings.