How to see what syntax markup is being used?


As I start to look into developing a syntax theme, I am trying to get a better sense of what tags the common syntax grammars are using, and how. To that end, is there a built-in command that can be used to get a report of what syntactic style is being applied under the cursor or within the current selection? My hope is to page around files spot-inspecting the markup. I find this to be a good way to get an initial understanding for how a grammar works before trying to dive into its actual code.

In case it helps, the thing I’m looking for is what SublimeText binds to command-option-p. (Screenshot attached.)


To be clear, I know I can open up the developer console and page through the DOM. I’m hoping for something a bit less cumbersome. Thanks!


If you open Atom in Developer Mode (atom --dev) you can right-click any item you wish to inspect and you will jump right to the correct position in the DOM:

You can also look at one of Atom’s build-in Syntax Themes to see what they style, for example atom-dark-syntax.


Atom has the same thing … it’s even bound to Cmd+Alt+P. You just have to have the Developer Tools open to the JavaScript Console:


Thanks. That’s certainly less cumbersome than paging through the DOM, though still not as nice as what SublimeText has.

And to clarify / reiterate, I’m more interested right now in the markup that grammars produce than what syntax themes happen to recognize. I’m comfortable reading the code for the grammars, but I prefer also being able to do “spot checks” both to get an orientation and check my understanding.


Thanks! Much better than looking at the DOM. Would be nice if it didn’t require the console, but I’ll take what I can get.


Actually, with the new notifications package, it could be posted in an info notification. I’ll add a feature request …


Submitted a PR:

It’s been merged. This should be in the next release of Atom or it’s available on master now.