I'm looking for a reference as to what each color of syntax highlighting in Visual Studio Code actually means. I'm currently using the dark default theme Dark+. I've gotten used to recognizing a few of the highlight colors and I get the gist of what I'm looking at, but I'm looking for a more detailed reference of what each color means.
I've searched for a while for this and can not find any reference guide or glossary/index listing the colors and meanings. Not sure if it matters, but I am solely writing in JavaScript.
Thank you in advance.
edit: I have included a screenshot of the type of syntax highlighting I am referring to.
The meaning of the syntax highlight colors comes in two parts:
How are the characters in the file organized into meaningful tokens?
How are those tokens assigned a particular color and font style?
Partitioning text to tokens
The first part is determined by a grammar description built in to VSCode. VSCode uses a system based on TextMate grammars. The grammars are defined in the VSCode sources (e.g., JavaScript.tmLanguage.json), but in that form have gone through a couple stages of postprocessing, making them nearly unreadable. There is no documentation of the intent of these grammar files. They tend to at least roughly follow the relevant language specification, but with plenty of ad-hoc deviations.
The most practical way to understand what tokens are defined is to use the "Developer: Inspect TM Scopes" tool available in the Command Palette (Ctrl+Shift+P). When you put your cursor on a token, it will show you the "scope labels" that describe that token. These labels are more or less human-readable.
Edit 2020-07-24: As of VSCode 1.47 (and possibly a little earlier) the command is called "Developer: Inspect Editor Tokens and Scopes".
Example:
Above, we can see that the return keyword is most specifically classified as keyword.control.flow.js. It is within a brace-enclosed code block (meta.block.js), within a function definition (meta.function.js), within Javascript source code (source.js).
That sequence of scope labels is the closest thing there is to a "meaning" for a token in VSCode.
Assigning colors to tokens
Next, there is the process of mapping that sequence of scope labels to a color and font style. That is done by the theme. In my case I am using Visual Studio Light, defined in the VSCode sources in light_vs.json. In the case of the return keyword, this is the applicable fragment:
{
"scope": "keyword.control",
"settings": {
"foreground": "#0000ff"
}
},
This says, basically, that anything with a scope label beginning with "keyword.control" shall have a blue color. But other fragments may override this one; the rules are somewhat complex. Why blue? It's an arbitrary aesthetic choice.
Why do function and NaN have the same color? The grammar assigns them different scope labels (storage.type.function.js versus constant.language.nan.js), but it just happens that the theme you are using (Dark+) assigns them the same color (as does mine). I find that an odd choice, but can only speculate about the reason.
Customizing the colors
You didn't ask, but an obvious follow-on question would be how to customize these colors, for example giving function and NaN different colors. See this answer.
I want to change / add syntax highlighting for a language in Sublime 2/3.
For example I want the keyword this colored in JavaScript.
How can I do that?
I know that there is a preference JavaScript File in C:\Program Files\Sublime Text 3\Packages, but I don't know what to change or if I have to create a new JavaScript Preference File somewhere in this folder %APPDATA%\Sublime Text 3.
Syntax highlighting is controlled by the theme you use, accessible through Preferences -> Color Scheme. Themes highlight different keywords, functions, variables, etc. through the use of scopes, which are defined by a series of regular expressions contained in a .tmLanguage file in a language's directory/package. For example, the JavaScript.tmLanguage file assigns the scopes source.js and variable.language.js to the this keyword. Since Sublime Text 3 is using the .sublime-package zip file format to store all the default settings it's not very straightforward to edit the individual files.
Unfortunately, not all themes contain all scopes, so you'll need to play around with different ones to find one that looks good, and gives you the highlighting you're looking for. There are a number of themes that are included with Sublime Text, and many more are available through Package Control, which I highly recommend installing if you haven't already. Make sure you follow the ST3 directions.
As it so happens, I've developed the Neon Color Scheme, available through Package Control, that you might want to take a look at. My main goal, besides trying to make a broad range of languages look as good as possible, was to identify as many different scopes as I could - many more than are included in the standard themes. While the JavaScript language definition isn't as thorough as Python's, for example, Neon still has a lot more diversity than some of the defaults like Monokai or Solarized.
I should note that I used #int3h's Better JavaScript language definition for this image instead of the one that ships with Sublime. It can be installed via Package Control.
UPDATE
Of late I've discovered another JavaScript replacement language definition - JavaScriptNext - ES6 Syntax. It has more scopes than the base JavaScript or even Better JavaScript. It looks like this on the same code:
Also, since I originally wrote this answer, #skuroda has released PackageResourceViewer via Package Control. It allows you to seamlessly view, edit and/or extract parts of or entire .sublime-package packages. So, if you choose, you can directly edit the color schemes included with Sublime.
ANOTHER UPDATE
With the release of nearly all of the default packages on Github, changes have been coming fast and furiously. The old JS syntax has been completely rewritten to include the best parts of JavaScript Next ES6 Syntax, and now is as fully ES6-compatible as can be. A ton of other changes have been made to cover corner and edge cases, improve consistency, and just overall make it better. The new syntax has been included in the (at this time) latest dev build 3111.
If you'd like to use any of the new syntaxes with the current beta build 3103, simply clone the Github repo someplace and link the JavaScript (or whatever language(s) you want) into your Packages directory - find it on your system by selecting Preferences -> Browse Packages.... Then, simply do a git pull in the original repo directory from time to time to refresh any changes, and you can enjoy the latest and greatest! I should note that the repo uses the new .sublime-syntax format instead of the old .tmLanguage one, so they will not work with ST3 builds prior to 3084, or with ST2 (in both cases, you should have upgraded to the latest beta or dev build anyway).
I'm currently tweaking my Neon Color Scheme to handle all of the new scopes in the new JS syntax, but most should be covered already.
I finally found a way to customize the given Themes.
Go to C:\Program Files\Sublime Text 3\Packages and copy + rename Color Scheme - Default.sublime-package to Color Scheme - Default.zip. Afterwards unzip it and copy the Theme, you want to change to %APPDATA%\Sublime Text 3\Packages\User. (In my case, All Hallow's Eve.tmTheme).
Then you can open it with any Text Editor and change / add something, for example for changing this in JavaScript:
<dict>
<key>name</key>
<string>Lang Variable</string>
<key>scope</key>
<string>variable.language</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF0000</string>
</dict>
</dict>
This will mark this in JavaScript Files red. You can select your Theme under Preferences -> Color Scheme -> User -> <Your Name>.
Use the PackageResourceViewer plugin installed via Package Control (as mentioned by MattDMo). This allows you to override the compressed resources by simply opening it in Sublime Text and saving the file. It automatically saves only the edited resources to %APPDATA%/Roaming/Sublime Text 3/Packages/ or ~/.config/sublime-text-3/Packages/.
Specific to the op, once the plugin is installed, execute the PackageResourceViewer: Open Resource command. Then select JavaScript followed by JavaScript.tmLanguage. This will open an xml file in the editor. You can edit any of the language definitions and save the file. This will write an override copy of the JavaScript.tmLanguage file in the user directory.
The same method can be used to edit the language definition of any language in the system.
The "this" is already coloured in Javascript.
View->Syntax-> and choose your language to highlight.
This is my recipe
Note: This isn't exactly what OP is asking. These instructions will help you change the colors of items (comments, keywords, etc) that are defined syntax matching rules. For example, use these instructions to change so that all code comments are colored blue instead of green.
I believe the OP is asking how to define this as an item to be colored when found in a JavaScript source file.
Install Package: PackageResourceViewer
Ctrl+Shift+P > [PackageResourceViewer: Open Resource] > [Color Scheme - Default] > [Marina.sublime-color-scheme] (or whichever color scheme you use)
The above command will open a new tab to the file "Marina.sublime-color-scheme".
For me, this file was located in my roaming profile %appdata% (C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\) .
However, if I browse to that path in Windows Explorer, [Color Scheme - Default] is not of a child-dir of [Packages] dir. I suspect that PackageResourceViewer is doing some virtualization.
optional step: On the new color-scheme tab: Ctrl+Shift+P > [Set Syntax: JSON]
Search for the rule you want to change. I wanted to make comments be move visible, so I searched for "Comment"
I found it in the "rules" section
"rules":
[
{
"name": "Comment",
"scope": "comment, punctuation.definition.comment",
"foreground": "var(blue6)"
},
Search for the string "blue6": to find the color variable definitions section. I found it in the "variables" section.
Pick a new color using a tool like http://hslpicker.com/ .
Either define a new color variable, or overwrite the color setting for blue6.
Warning: overwriting blue6 will affect all other text-elements in that color scheme which also use blue6 ("Punctuation" "Accessor").
Save your file, the changes will be applied instantly to any open files/tabs.
NOTES
Sublime will handle any of these color styles. Possibly more.
hsla = hue, saturation, lightness, alpha
rgba = red, green, blue, alpha
hsla(151, 100%, 41%, 1)
- last param is the alpha level (transparency) 1 = opaque, 0.5 = half-transparent, 0 = full-transparent
hsl(151, 100%, 41%) - no alpha channel
rgba(0, 209, 108, 1) - rgb with an alpha channel
rgb(0, 209, 108) - no alpha channel
I wrote a simple gedit xml lang file for do highlighting source code. When i use constructions like
<style id="comment" _name="Comment" map-to="def:comment"/>
<style id="keyword" _name="Keyword" map-to="def:keyword"/>
it always color comments blue and keywords brown. I would instead like my comments green and keywords red. How can I do that?
I also noticed some schemas under /usr/share/gtksourceview-2.0/styles:
classic.xml cobalt.xml kate.xml oblivion.xml styles.rng tango.xml
How can I use these in my lang file?
The lang files do not describe styles. The lang defines the language (this is a keyword, this is comment, etc.) and the style describes how to display those things (make comments green, make keywords blue and bold, etc.). It's up to the end user to choose the style based on there preferences.
You can select a style in the Gedit preferences dialog. As it happens, the "Kate" style does color comments green and keywords red, so you should use that one.
Take note that the paths for where you store the style and lang files is different in Gedit 2 and Gedit 3 (GTK+ 2 and GTK+ 3).
Are there any tools to convert a pygments style definition into a gvim colorscheme?
I found vim2pygments, which converts vim colorschemes to pygments themes, but I haven't found anything doing the inverse. Specifically, I'm using macvim, though I imagine the colorscheme format would be the same for any gvim-derivative (please, correct me if I'm wrong).
I haven't come across anything that will automate this process, but it should be very easy to do by hand. Grab an existing colour scheme, stick it in your ~/.vim/colors/ directory and put the colours that are defined in the pygments scheme into the appropriate places.
For example, if you use my colour scheme (which uses a non-standard format to make it more editable) and make it uses the pygments autumn scheme, you could take the line that looks like this:
let ColourAssignment['Function'] = {"GUIFG": '#007777', "CTERMFG": 'Cyan'}
and change it to look like this:
let ColourAssignment['Function'] = {"GUIFG": '#00aa00'}
(I've removed the colour terminal assignment as you've said you're using a GUI and it is thus largely irrelevant).
It shouldn't take very long to go through the whole set. My colour scheme is designed for dark backgrounds primarily (it adjusts colours if you switch to a light background), but it wouldn't be very hard to get rid of this aspect: change the "Normal" highlighting to be black on white rather than white on black and remove the s:MakeDarker function and the bit in the if &background == 'light' block.
Alternatively, you could do a similar thing with the normal syntax highlighting format by taking (e.g.) darkblue.vim and changing (e.g.):
hi ErrorMsg guifg=#ffffff guibg=#287eff ctermfg=white ctermbg=lightblue
and changing it to:
hi ErrorMsg guifg=#aa0000 guibg=#ffffff ctermfg=white ctermbg=lightblue
I just imported new fonts and colors for Visual Studio 2008. I want to change the color on the ref keyword on a parameter to stand out a little more. Anyone know what option that is in the Display Items under Fonts and Colors?
That's not how syntax highlighting works in VS2008. It is done by 'lexical analysis', not a language parser. In other words, it tokenizes the text in the source code file and classifies them by lexical type. Keyword, identifier, number, string literal, comment, whitespace. And gives them their associated color.
It is important that it works that way because lexical analysis is fast, parsing is slow. Getting text to repaint in a text editor needs to be fast. Accordingly, it has no option to classify individual keywords, the only option you got is the "Keyword" color in the dialog. Which changes the color of all keywords, not just ref.