Syntax Highlighting Guide for Atom

Question

I am very pleased with the new editor by Github. Unfortunately it isn't exactly easy to customize it. I wanted to create my own Syntax Highlighting Theme, because I am not happy with the ones available to download (at least they don't seem to do well with Java)

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?

Answer 1

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:

1. Put your text cursor on the item you want to style
2. 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.