How do I style a highlight?


I started a proof of concept of a project that scans through a file and highlights filenames. I’m able to generate the markder and decoration, then using the dev tools I can verify that it generates a highlight over line 3. I even have some styles in my stylesheet, but they just don’t seem to work.

I did notice in the dev tools that the highlight is inside <atom-text-editor>'s #shadow-root, maybe that’s why my CSS selectors aren’t working?


I had to do something similar, I’m not sure if this will help - but I encountered the same problem when trying to highlight certain lines to display CSS colors. I tried to use Markers just as you did however I wasn’t able to get the desired effect just like you.

I ended up having to modify the Shadow DOM (which is hackish) to get it to work.

You can check out my code here:

In the code I get each editor view, then convert it to a JQuery object and then get the Shadow DOM and convert that to a JQuery object and then modify it as I would have before the latest API changes.

I’m not sure if the current state of Markers allows us to achieve this any other way.


I found the answer in bracket-matcher. When I prefix my selector with atom-text-editor::shadow it works.


@AsaAyers’ solution is the right one. You shouldn’t have to use code to style things inside the Shadow DOM. There are numerous posts on the board here that mention this solution.


You may like this package atom-like-brackets-editor