How do i add a class style when decorating a marker?


I’m trying to add a style class to a marker via decorateMarker, i am able to append the style sheet to the head of the document but it doesnt seem to affect anything, ive noticed there is some shadow-dom going on.

Any help?


You shouldn’t need to append the style sheet to the head of the document. (And unless I’m mistaken, this might interfere with Atom’s style reloading mechanisms?) You just need to add a stylesheet in the styles directory of your package and Atom will take care of loading it in the right place, as mentioned here in the docs:

And Atom’s use of the Shadow DOM is explained here:


only problem is that the style is dynamic. everytime upon event it gets different color. so i cant append it to /styles dir.


How many different colors are there that it might get set to? The linter packages use things like .error and .warning that assign a different color to different markers depending on severity, but there’s a finite number of them. Unless you’re rotating through a large number of colors, I still feel like the static stylesheet approach can be used.

And if you are rotating through a large number of colors, how are you making sure that they’re visible against the user’s syntax theme?


eureka! i managed todo so with this:

css = ".atom-text-editor ."+clazz+", atom-text-editor::shadow ."+clazz+" {\n  position: absolute;\n z-index:1; background: " + (justCursor ? 'transparent' : color) + ";\n  border-left: 2px solid " + color + ";\n}";

this lets me decorate using this:

cursorRange.decoration = this.atom.decorateMarker(, {type:'line',class:clazz});


also, im currently appending them to the head of the document.