Changing syntax highlighting colours


#1

In PHP (and many other languages), single-quoted strings behave differently from double-quoted strings.

I would like to have different background colours for those two kind of strings.

Looking in developper mode, one can see that they have CSS classes “string quoted single php” and “string quoted double php”.

But where is the CSS defined? Where can I find where the CSS is defined for the PHP language (or for the meta-definition that is used by the PHP syntax highlighter)? And if just editing the file won’t do it, what is the proper procedure to change it?

(I run Atom on Windows 7). Thx.


How can I change the color of specific tags inside editor?
Styles.less, how to address classes shown at "Scopes at cursor"
#2

The CSS is defined in the Syntax Theme that you have installed. So for instance if you have the Atom Dark syntax theme installed then it would be:

But you can override your themes by putting CSS/LESS in your styles.less file which you’ll find in your Atom configuration directory.


#3

<Clouseau disguised as Toulouse Lautrec in some old Pink Panther film:>
It vorks! It vorks!!!
</clouseau>

Thanks!


#4

Changing the colors manually with styles.less? How?

/*
  • Your Stylesheet
  • This stylesheet is loaded when Atom starts up and is reloaded automatically
  • when it is changed and saved.
  • Add your own CSS or Less to fully customize Atom.
  • If you are unfamiliar with Less, you can read more about it here:
  • http://lesscss.org
    */

/*

  • Examples
  • (To see them, uncomment and save)
    */

// style the background color of the tree view
.tree-view {
background-color: #111;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
color: #fff;
background-color: #222;
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
border-color: #fff;
}

// change the color of the comments
atom-text-editor .syntax–comment {
color: #666;
font-style: normal;
}

// test to change th f… CSS class color/highlighting
atom-text-editor .class {
color: #000;
}
// or this and many many more not working …
atom-text-editor .class–attribute {
color: #000;
}


#5

You are making guesses about what classes are available. Every class applied by Atom’s highlighting engine starts with syntax--. For the rest of the class name, you can look at the DOM inside Atom or at the grammar being applied. Try .syntax--class.


#6

It would be nice if it worked with “.syntax–class”, but apparently that is so complicated in Atom and quite obviously that’s not done, because the color of the CSS classes I could only change with a lot of attempts only “.syntax–meta.syntax–selector.syntax–css .syntax–entity.syntax–other.syntax–attribute-name.syntax–class” :confused: :frowning: WTF


#7

You can use chrome dev tools to read the classes directly, or read the source files in the relevant language-* repo


#8

I have been able to change the CSS highlighting colors so far and so cumbersome, but that had an impact on the HTML highlightings - how stupid is that?

Here are my styles.less customization:

// style the background color of the tree view
.tree-view {
background-color: #111;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
color: #fff;
background-color: #222;
}
// style UI elements inside atom-text-editor
atom-text-editor .cursor {
border-color: #fff;
}
// change the color of the comments
atom-text-editor .syntax–comment {
color: #666;
font-style: normal;
}
// “#” & “.”
atom-text-editor .syntax–entity {
color: #7ca4ff;
}
// Format “px”, “%”, “s”, …
atom-text-editor .syntax–other {
color: #00c76d;
}
// Numbers
atom-text-editor .syntax–constant.syntax–numeric.syntax–css {
color: #71c700;
}
// Gradients
atom-text-editor .syntax–support.syntax–function.syntax–gradient.syntax–css {
color: #b58b23;
}
// Colorformats
atom-text-editor .syntax–support.syntax–function.syntax–misc.syntax–css {
color: #b5b423;
}
// Property
atom-text-editor .syntax–support.syntax–type.syntax–property-name.syntax–css {
color: #c17dfc;
}
// Attribute
atom-text-editor .syntax–meta.syntax–property-group .syntax–support.syntax–constant.syntax–property-value.syntax–css, .syntax–meta.syntax–property-value .syntax–support.syntax–constant.syntax–property-value.syntax–css {
color: #f0ae38;
}
// HTML Sytax
atom-text-editor .syntax–meta.syntax–selector.syntax–css .syntax–entity.syntax–name.syntax–tag {
color: #7ca4ff;
}
// Classes
atom-text-editor .syntax–meta.syntax–selector.syntax–css .syntax–entity.syntax–other.syntax–attribute-name.syntax–class {
color: #7ca4ff;
}
// IDs
atom-text-editor .syntax–meta.syntax–selector.syntax–css .syntax–entity.syntax–other.syntax–attribute-name.syntax–id {
color: #7ca4ff;
}
// Hover, Focus …
atom-text-editor .syntax–source .syntax–entity.syntax–other.syntax–attribute-name {
color: #ff7777;
}
// Media
atom-text-editor .syntax–keyword.syntax–control {
color: #fc8cfc;
}
// Strings
atom-text-editor .syntax–string {
color: #f08f38;
}
// Color
atom-text-editor .syntax–meta.syntax–property-value .syntax–support.syntax–constant.syntax–named-color.syntax–css, .syntax–meta.syntax–property-value .syntax–constant {
color: #f08f38;
}
// HTML Entity
atom-text-editor .syntax–meta.syntax–tag .syntax–entity, .syntax–meta.syntax–tag > .syntax–punctuation, .syntax–meta.syntax–tag.syntax–inline .syntax–entity {
color: #7ca4ff;
}
// Variable / Dateipfad
atom-text-editor .syntax–variable {
color: #f08f38;
}


#9

I’m sure you’ll learn with practice.

Yes, because the start of scopes are generic. If you want to target CSS files specifically, you can either use the trailing syntax--css class (seen with dev tools & in source files), or target text editors with the data-grammar="source css" attribute (again, it’s all there in the dev tools).


#10

Yes, I did what I did with the DEV tools, but the problem is, everything I’ve adapted in CSS has changed HTML as well. I can not change CSS highlighting independently of HTML highlighting. And “syntax–css” or “syntax–class” and so on is no help.

It would be really great if in the styles.less only the CSS with syntax–css, or just HTML with syntax–html, PHP with syntax–php would be approachable. But it is not!

Or for my sake different styles in different files like: style-css.less, style-html.less etc.

“Atom a hackable text editor” r u kidding me? “hack” the highlighting with a separate study and at least a week :frowning:


#11

I’m sorry to hear that. Here’s an example to help you get started; I’ve tested it, so it definitely works (this targets tree-sitter JavaScript grammars)

atom-text-editor[data-grammar="javascript"] {
  .syntax--variable {
    color: pink;
  }
}

Hmmm. I don’t know what’s more approachable than CSS. Many users are web developers, so they will already be familiar with it. And for other users, like myself, CSS syntax is a google search away.

Like I say above, many users of Atom will already be familiar with JS and CSS. I don’t know how you imagine there could be no learning curve. Does “hackable” mean something specific to you? Because everything can be changed, it just takes knowledge of the tools.


#12

No, by that I mean the assignment - atom-text-editor .syntax–css and then what you want to change, e.g. atom-text-editor .syntax–css-classes and then you can address, change, adapt and that applies exclusively to CSS and has NO effect on HTML, PHP etc. because in the beginning “. syntax–css. …” stands. Understanding this would be intuitive.
I would prefer an even simpler version like:
“.css .classes {…}”, but hey, you can not have everything :confused:

But OK, I’ll try it with the JS version (JS grammars).

THX again


#13

The answer presented is right, but in order to fully understand why it’s right I recommend going into the dev tools and taking a look at the atom-text-editor element to see what attributes it has.

It does depend on where your starting point is. If you are inexperienced with CSS and don’t know how to use specificity to make sure that your style rules override ones from other stylesheets you have installed, then approaching any complex web site or Atom (which is a very complex web site, display-wise) will require that you learn new skills. I had the CSS chops from previous experience, but Atom has made me much better at JavaScript than I was, because I had to learn new skills in order to make Atom do what I wanted.

When Atom used a shadow DOM to isolate the highlighting CSS from the UI theme, this was the case. That was removed for technical reasons and the namespace system we currently have was implemented.