Coloring text


I’d like to color certain characters in a buffer, there are similar topics (cited later) but I need to provide the background so bear with me. I’m trying the following:


range = [[0, 0], [0, 1]]
marker = @editor.markBufferRange(range, invalidate: "never")
decoration = @editor.decorateMarker(marker, type: 'line', class: 'levelOne')

In color-char.atom-text-editor.less:

.levelOne {
    color: #800000;  // Maroon.
    background-color: #ffffcc  // Pale yellow.

When I do a “Window: Reload” I see the entire first line colored maroon before the syntax theme has loaded. Then once everything gets loaded the maroon goes away and I see the line highlighted in yellow. If I remove the background color then everything behaves the same and when everything is loaded up the maroon is gone and there is no highlighted text.

I’m ok with the fact that the whole line is affected even though my marker is only over the first character since the documentation for decorateMarker says “line: Adds your CSS class to the line nodes within the range marked by the marker.” (However I would also like to know how to color just the characters in my marker).

I’ve done a bit a research on the topic and found a few similar discussions i.e. 6245 and 2886. The gist of it, from what I understand, is that markers are on a different z-level than the actual text so that’s why I can’t color a character with decoration. Maybe.

In the end I have two questions. The first is general and has been asked before (if in a different context), it is how can I color a specific character? For example a bracket with it’s pair. Second, is if I’m not supposed to be able to do it with a decoration how come the first line of my file will appear maroon while atom is loading and then switch to normal syntax highlighting once it’s finished?

EDIT: I just discovered that if I have a document of plain text (therefore no syntax highlighting) I in fact can color the line maroon and the color persists after everything is loaded. So it seems I can color text with a decoration but the syntax theme is overriding it. Thoughts?


If you want to change the color of a character, then the syntax theme is the only truly reliable way of doing that at this time. (The edge case you cite of plain text is only true if it isn’t syntax highlighted by something like the language-todo package.) If you want to add some decorations to it, such as backgrounds or underlines, things that work well with the separate z-order of the decorations system, then you can use markers and decorations.

To answer your other question of how do you mark just one character and not the line, then you can use the highlight or overlay decoration types (I don’t remember which is appropriate for your use):