13

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...

Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
zypro
  • 1,158
  • 3
  • 12
  • 33

1 Answers1

31

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.

Cliff
  • 109
  • 7
Richard Slater
  • 6,313
  • 4
  • 53
  • 81
  • 1
    Thanks for that detailed answer. But there is no change by doing your steps. My atom knows 3 selectors for TODO: http://i.imgur.com/DHorHsr.png Is this a problem? Other changes work. – zypro Mar 24 '16 at 13:42
  • 2
    curious, I'm not sure why that isn't working for you. You could try a couple of things: 1. Reload the Editor with `Ctrl-Alt-R` 2. Change the class name from `.storage.type.class.todo` to `.todo`, then save and reload 3. Put !important between the `yellow` and the `;`, then save and reload. – Richard Slater Mar 24 '16 at 13:54
  • 1
    I found the problem! I had to disable the 'Use Shadow DOM' core setting! omg. Thanks a lot =) – zypro Mar 24 '16 at 14:39
  • Oh well done, good find. I'm not sure it's a great idea to disable the Shadow DOM as this option will disappear in a future version of Atom. I'm going to have a bit of a read up about the shadow DOM and see how to update my answer with a more accurate version. – Richard Slater Mar 24 '16 at 15:45
  • 1
    All done and tested, for reference I captured the above in Atom 1.7.0-beta0. Thanks for your help @zypro couldn't have figured that out without you. – Richard Slater Mar 24 '16 at 16:19