Syntax Highlighting Guide for Atom

18
votes

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?

3
editorcustomizationsyntax-highlightingatom-editor

3 Answers

28
votes

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.

6
votes

You can use chromium web-console by pressing Ctrl+Shift+I (tested in linux) and highlighting any element. After then open your stylesheet by pressing Edit->Open Your Stylesheet and add style for element with LESS syntax.

For example:

You want bold highlighting class and function name. If you select class with chromium-console you can see that it have class .name

That you should add in you Stylesheet file something like this:

atom-text-editor::shadow .name{
    font-weight: bold
}

And you may create you own theme. In Atom it's not difficlt - press Ctrl+Shift+P and type "Generate Syntax Theme". In new theme you can copy some code from other theme. If you don't know CSS/LESS - don't worry! Your new theme have file in style folder named colors.less. You can change it or write new color rule on base.less file.

Atom have awesome doc, you can read about creating theme in this page https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

1
votes

For others that come here because the highlighting for a filetype is not recognized for your language:

  • open the ~/.atom/config.cson file (by CTRL+SHIFT+p: type ``open config'')

  • add/edit a customFileTypes section under core for example like the following:

    core:
  customFileTypes:
    "source.lua": [
      "conf"
    ]
    "text.html.php": [
      "thtml"
    ]

(You find the languages scope names ("source.lua", "text.html.php"...) in the language package settings see here)