Looking for feedback and tips to target more elements


First of all I’d love to hear what you guys think about my theme (which I’ve spent an unnecessary amount of hours on hah): https://atom.io/themes/apathy-theme

I’m looking to learn about any tips & tricks I’m not aware of for targeting “hard to reach” elements? Essentially I’d like everyone who uses my theme to get the same or similar result so I’d like to accomplish this without requiring the addition of any additional grammars.

One of the things that has been most useful for sure is the nth-child() and sibling + target to do things like styling the curly braces used in an if statement differently than braces next to a parentheses (by using the sibling selector).

However, all these useful selectors are only possible if that thing is wrapped in a <span> to begin with. If I want to say, target just the word “Something” in Something.method, I can’t, because it’s not wrapped in anything. This is better illustrated with a snippet:

<span class="source js">
     <span class="meta delimiter dot">.</span>
    <span class="brace begin">(">
    <span class="brace end">)</div>

As you can see, if “Something” was wrapped in a span, you can use .source > span:first-child but since there’s no tag for text on its own that’s not possible. Have any of you figured out a way to - for example - just style the word “something”, or “method”?


Pretty stylish theme! :smile:

If there is no span and class, with CSS alone you can’t do much.

Might be possible to add spans through a language package. For JavaScript like your example it would be this: https://github.com/atom/language-javascript


Thanks! Your dutotone theme is one of my favorites as well :blush:

The example I posted in fact is with language-javascript grammar applied. Currently it’s just missing a lot of stuff IMO. There’s an issue posted by one of the atom devs about it so hopefully that gets fixed soon, and then we’ll be able to do a lot more!

On an unrelated note, In the process of looking into this I also stumbled upon this very interesting article which discusses a completely different approach to syntax highlighting, and there’s even an atom package created with this technique already! I’ve already started adding support for it but so far I haven’t been able to come up with a scheme for it I’m happy with - but it allows you to highlight a lot more stuff. But in theory it does seem like a superior approach so hopefully in the future it’ll get implemented into the core grammars (or at least as an option)!


There is a topic for the discussion of semantic highlighting (the name for the technique you’re talking about @cooperm) here: