How do I style a highlight?


#1

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?


#2

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: https://github.com/carlosingles/css-color-underline/blob/master/lib/main.coffee

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.


#3

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


#4

@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.


#5

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