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?

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

Solution 2

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

Solution 3

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)

Comments

[RNickMcCandless]

This solution ended up being very helpful with Markdown files that seems to lack decent syntax highlighting. I just put the classes directly into the styles.less under the .editor {} class.

[PhiLho]

Cmd+Alt+P is a Mac-specific shortcut... I tried Ctrl+Alt+P on Windows, without success... And I can't find your string in the command palette, in 1.3.1.

[Quotidian]

"Editor: Log Cursor Scope" only shows up in the Command Palette when you have your cursor in an active editor. It will show up if you do step #1 first.

[sidewinderguy]

Thanks I was finally able to change the comment color. The part where you show that you have to specify "atom-text-editor::shadow" is important and for some reason I haven't seen that explained or demonstrated anywhere else.

[davidfrancis]

Yes the "atom-text-editor::shadow" is important , and also you may need to add a section for every style that pops up when you hit Cmd+Opt+P. If you only do one of the styles then the other one may be overwriting what you're trying to do e.g. changing color

[davidfrancis]

Note that you may need to add a section for every style that pops up when you hit Cmd+Opt+P. If you only do one of the styles then the other one(s) may be overwriting what you're trying to do e.g. changing color

[JinSnow]

::shadow is depreciated. New syntax: stackoverflow.com/a/43373452/1486850

[Denis Savenko]

Thank you for this poin. I post this 2 years ago and honestly very suprise how long it works)