Where can I find the styles for grammer tokens?


#1

Hi all,

I am working on a package for a language similar to Yaml (syntax highlighting) - so I’ve taken the language-yaml package as a reference.

The rules for the language have the following format:

{
    # match config - regex #
    'name': 'string.unquoted.block.yaml'
}

Problem is I am unable to find where the style information is defined for the string.unquoted.block.yaml marker. Cannot find it in the theme, nor in the package. What is the correct place and convention to define style information for my markers - e.g. string.for.my-custom-language ?

Thanks


#2

Language support is broken up into two parts: grammar and theme. The grammar defines the rules that signify how to map text structures into “scopes”. The theme defines the rules that signify how to map scopes to styles. So the proper place for style information is in the theme.

Also, keep in mind that themes are mostly Less stylesheets. So they can define styles for only .string or .string.unquoted rather than having to specify .string.unquoted.block.yaml. It’s generally better to be less specific when designing your theme … unless you want to make one language look different than all the other languages.


#3

The example of how syntax themes define styles for string: One Dark Syntax, language.less#L93-L108

Also some related links:
[discuss] Documentation For Atom Grammars?
[discuss] Where can I find the available generic syntax variables?
[Issue] There is no naming convention of scope selectors


#4

And if you really feel like you need to supply some styles yourself, you can import and use the syntax-variables in your LESS file, though you should be aware that it may not play nice with every syntax theme out there…

@import 'syntax-variables';

.string.unquoted.block.yaml {
  color: @syntax-color-variable;
}

#5

Thanks guys, the replies were really helpful! :+1: