How to see what syntax markup is being used?


#1

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

(EDITED TO ADD)

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!


#2

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.


#3

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:


#4

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.


#5

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.


#6

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


#7

Submitted a PR:

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