Documentation for creating custom grammars


I saw the documentation at, but it doesn’t say anything about custom grammars. It would be nice if custom grammars had similar docs, or were a part of that page.
In particular, I have an existing Sublime Text grammar implemented as a yaml file that I translate to plist before installing. I think I read that Atom uses the same type of language definition. It would be nice if there was a simple guide for taking that yaml or plist file and installing it.


Check this:

Specifically this link shared by @leedohm when I asked the same question:


You could try to see if an automatic conversion works, by first converting the Sublime Text grammar into a TextMate Bundle, and then converting the TextMate Bundle into an Atom grammar package.

See this post for a step-by-step explanation:


Thanks for the responses. I got a grammar working by creating an atom package (using Ctrl-Shift-P then ‘Generate Package’) and deleting everything except the grammar directory and the package.json. I then placed my json data as a file in grammar.

It looks OK, but some things aren’t getting highlighted, I suspect because of a class that Sublime supported but Atom does not. Is there a way to find the css classes supported by Atom? (Example: keyword is supported, variable.parameter doesn’t seem to be.) (I know I could create my own stylesheet, but I really wanted to support other the builtin themes.)


Atom supports any CSS classes you want to choose. If you want to see the classes that are commonly used, I would take a look at the One Dark Syntax theme.


I found this Q & A from a similar discussion (Syntax Highlighting Guide for Atom) and thought it might be helpful here as well.

Now the files (syntax-variables, color.less, etc.) to style seem to be in:

~/.atom/ .../packages (if you want to change existing themes)

The problem is just that I don’t know which (CSS) classes style which elements of the syntax. Is there a place where I can look up how to change the color of for example variable type declarations?

Yes, you can start Atom in Developer Mode by using the command atom --dev or by using the menu View > Developer > Open in Dev Mode … When you do that you can right click on any element in the UI and select Inspect Element from the context menu, just like you would in your web browser.

Additionally, for syntax elements you can:

Put your text cursor on the item you want to style
Press Cmd+Alt+P on OS X, Ctrl+Alt+Shift+P on other platforms, or find “Editor: Log Cursor Scope” in the command palette to display the scopes of the syntax element
The scopes of the syntax element translate directly to CSS classes.


The confusion is that there’s two things that affect how something is colored: the grammar and the syntax. The grammar applies selectors to the text, but the syntax theme works on those selectors to style the text.

If you wanted to change the color of a variable type, the selector would be something like .variable.language in a stylesheet, not in a grammar itself.