Ask for help to understand "decoration" example



There is an example for using the decoration functionality in Atom on This example is not complete - I assume a styling declaration is needed.

Could someone please help me to fill in the blanks to have the example do something.

Another more complete example is mentioned on which links to This is a wonderful example created by the Atom design team. But sadly it is now outdated and does not work on current versions of Atom.

FIGURE 1: The original decoration example

Thank you for your attention.


The example on the Decoration page works fine. If you select text, set editor, and paste that code into your console, then go to styles.less and add

.my-line-class {
    background-color: red;

then you will see all lines with selected text become bright red.


Thank you, that was helpful.
The result is not what I expected.


  • note a small portion is selected
  • code on the right


  • whole code line is highlighted in red, not just a character
  • highlighting a line is a type: line (?)… what is a underline?
  • on the right - make sure only a small portion was selected by range


  • destroy action does work


I think you’re looking for the highlight decoration type.


That is of great help.

type: highlight was what cases only the selected text to be highlighted.
:blush: …just as the type says it will.

Moving on… I would like to have a deeper look at what type: text can deliver.
From my understanding I can choose use class and/or style attributes with that.

Please could you direct me to background study material so I may work out how my style sheet should look like and what to fill in with class and/or style. Spell check wavy underline would be possible to do, I’d expect. But the burning riddle I hope to solve, could I change font colour (maybe yes) and font (probably no).

Thank you.

Augmenting the text by decoration seems not to be possible when looking at:

If I understand correctly the decoration layer is below the level of the actual editor text. This makes me curious to what type: text for decoration is useful for. Shadow under the text? Maybe in colour?