Why is this highlighted?


I’m creating a new theme for Atom editor, but I have now a problem with it. I don’t know why PHP code and HTML within PHP file gets highlighted and EJS and JS not. I don’t want any code to be high lighted for no reason…



There are two types of themes:

  1. UI themes — Controls everything outside of the editor view
  2. Syntax themes — Controls everything inside of the editor view (including the gutter, find and replace highlights, bracket matching highlights, etc)

Which type of theme are you creating? A syntax theme, I assume?

If so, syntax themes control the style (including color, font weight and style, animations, borders etc) of the syntactic elements … but do not control how the syntactic elements are recognized. The language grammars control how the syntactic elements are recognized. So HTML is highlighted in PHP files because the language-php grammar package says it should be.


So, the high-lighting is not changeable in the stylesheet?


It depends on what you mean by “highlighting”. As I stated above, there are two separate steps that have to happen for highlighting to occur. Only one of those steps is controlled by the stylesheet.


If you are working a syntax theme, open your theme with the development console enabled, I use atom --dev from the project directory. Right click highlighted text, select “Inspect Element”. Look in console’s “Styles” section to see what css is making you upset. Locate that css in you syntax’s less files and change it.

For this particular instance it is because your are using the style tag in a html file. Atom adds a source class. I think that this highlighting is useful, but you can certainly change it to your liking.