Customizing language syntax styles


#1

Hello,

I wish to update the less.styles file to customize some syntax styles.

I have successfully added the following lines listed below to customize the style for comments and strings that appears to work across all programming languages.

I would also like to customize the keywords style for all programming language e.g. if … then, for … etc.

My questions are:

  1. Does this need to be specific to a programming language or is there a general “keywords” style customization?
  2. If there is a general customization, what is it?

My google searches have been unsuccessful and so I am asking the community for guidance on how to accomplish this.

Thank you!


// style the comments foreground color on the atom-text-editor-element itself
atom-text-editor .syntax–comment {
color: rgb(235,100,0);
}

// style the comments foreground color on the atom-text-editor-element itself
atom-text-editor .syntax–string {
color: rgb(0,115,0);
}


#2

Most language use the scopes laid out here. However, there is nothng enforcing this, and many languages are so different from one another that it’s impossible to get it perfectly consistent.

As for keywords, again that depend on how the language grammar handles them. Use Editor: Log cursor scope in the command palette to see what scopes these key words are using. TextMate does define the keyword scope, but I don’t know if it’s used for everything you want it to be.


#3

Thank you so much for your response.

I have indeed used the Log Cursor scope but am most probably failing to correctly write the lines in less.styles. I would appreciate any guidance.

Here is what I did: I used the Log Cursor Scope on a python if statement and got the following scopes:
source.python
keyword.control.conditional.python

What lines should I add to the less.styles?

Thank you!


#4

It depends how specific you want to be.

For example, this will restrict it to Python files

atom-text-editor .syntax--source.syntax--python .syntax--keyword {
  color: hsl(207, 82%, 66%);
}

This will should be applied to all cases of keyword (and deeper, so keyword.* where * is anything, in any language. I couldn’t get it working on the Python if keyword, using the theme one-dark for some reason.

atom-text-editor .syntax--keyword {
  color: hsl(207, 82%, 66%);
}

And this will be applied to all cases of keyword.control, in any language

atom-text-editor .syntax--keyword.syntax--control {
  color: hsl(207, 82%, 66%);
}

I believe the atom-text-editor has a good purpose, but I don’t know what it’s for really.

Another thing to note is that it won’t work when tree-sitter parsers are enabled (at least not how they are now). This setting is in the core tab in the settings menu.


#5

Many thanks again!

I like consistent styling across all languages I use so I had tried just the .syntax–keyword element but it had failed for both python and bash files. That is what led to my original post.

But your first and third suggestions work and even though it’s not my top choice to restrict to python or just control elements, I am going to use those - thanks!

BTW where can I learn how to reference the style elements i.e. “.syntax–keyword.syntax–control”? Is there a doc/guide/manual ?


#6

It’s CSS. All the information should be there in the DOM, which can be viewed with developer tools. I don’t think there’s any documentation beyond the kind of thing I just showed, and anything more complicated would have to be worked out yourself.

Of course, there are people here who know a lot more about it than me, so I’m sure they can help if you get stuck.


#7

Thanks for all your help!


#8

Readability. Sticking atom-text-editor at the start of your rule is a great way to tell at a glance which rules are aimed at styling the contents of the default editor component, even if you don’t need the element for priority purposes.