Syntax Highlighting Guide for Atom
atom-editor, customization, editor, syntax-highlighting
Solution
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.
Problem
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?