Highlight line with varying style


I’m doing my first steps writing a atom package. So far I managed to highlight a line using


which allows me to set the style of a range.
However I would like to change the style itself because I want to visualize some kind of progress depending on a dynamic value between (0, 100). In order to do that I want to apply a gradient style which I change according to the progress.

Do you have any tips/hints? Thanks!


You can pre-define multiple classes in your package’s style sheet and change the class of the Decoration as the internal state of your package changes.


I figured that as a way that could work. If I combine it with a loop in the *.less file I think that should work. But essentially there is no way of a direct DOM manipulation inside the text editor?


There is a way, but using the Atom API is easier by far. The TextEditor component gets re-rendered constantly, so if you want to manipulate the DOM, you have to do that constantly. With a Decoration, every time the editor gets rendered, Atom will look at that specific Decoration and apply the class you’ve set. You can also pass a key called style in the decorationParams object (for cursor and text decorations) and calculate the style elements in JS.