Change the visual characteristics of the elements of the finished syntax in Sublime Text 3

If you are not satisfied with any ready-made scheme, set the colors yourself. Warn about three circumstances:

1. It may take several minutes from the moment you make changes to the color scheme until a new color is displayed. Sometimes it helps to reload a file or Sublime Text 3 itself.
2. From the stack trace and pop-up windows of the editor it is not always clear where he made a typo in the syntax. I recommend using the Local History plugin so that you can roll back to previous versions of the file.
3. Scopes (see below) change with the release of the new Sublime Text 3 builds. After the upgrade, it may turn out that the settings you have written have gone astray, and you will have to reinsert already new scopes.

Properties that are responsible for the color and style of the syntax elements of markup languages, programming languages, macro packages, languages ​​and style sheets, etc. in Sublime Text 3 are called “scopes”. Translated as “scopes”, I cannot vouch for the accuracy of the translation.

Where to embed

1. Open the file of your active color theme (scheme). If you don’t know how, see here in the first two paragraphs after “Simple Solution”.

2. Somewhere between the <array></array> tags of our color scheme we add the following XML array:

    <!-- Комментарий --> <dict> <key>name</key> <string>Scope Name</string> <key>scope</key> <string>scope(s)</string> <key>settings</key> <dict> <key>foreground</key> <string>color</string> </dict> </dict> 

   Options:

   <!-- Комментарий --> - optional. In order not to forget what the field of visibility inserted by us means.

   <key>name</key> , <string>Scope Name</string> - optional. Between the <string></string> tags, set any scope name that will be displayed in the TmTheme Editor .

   <key>scope</key> , <string>scope(s)</string> - between the tags <string></string> insert the scope (or areas) of visibility. How to get them - see below. It is important not to leave the space between <string></string> empty, - otherwise, the color that you specified instead of color will be highlighted and not at all what you wanted.

   <key>foreground</key> , <string>color</string> - between the tags <string></string> specify the color in the formats HEX , ARGB or X11 . The latter format would not be recommended due to the fact that a) at least the colors aqua , fuchsia and lime not always supported by Sublime Text 3, b) various kinds of malfunction periodically occur, which do not occur if we enter the color into HEX or ARGB.

3. We obtain and introduce the scope in one of three ways, described in detail below, following the examples.

4. Enter the color instead of color → in the XML construction → save the color scheme file → we look at the results.
   
   

Examples

Gold text:

 <dict> <key>scope</key> <string>text.html.basic source.js.embedded.html source.js meta.group.braces.round meta.group.braces.curly meta.property.object.js </string> <key>settings</key> <dict> <key>foreground</key> <string>gold</string> </dict> </dict> 

Green background:

 <dict> <key>scope</key> <string>text.html.basic source.js.embedded.html source.js meta.group.braces.round meta.group.braces.curly meta.function-call.method.without-arguments.js variable.function.js </string> <key>settings</key> <dict> <key>background</key> <string>#6BC7548F</string> </dict> </dict> 

Oblique coral text:

 <dict> <key>scope</key> <string>text.html.basic source.js.embedded.html source.js meta.group.braces.round meta.group.braces.curly meta.function-call.method.with-arguments.js variable.function.js </string> <key>settings</key> <dict> <key>fontStyle</key> <string>italic</string> <key>foreground</key> <string>lightcoral</string> </dict> 

The foreground , fontStyle (accepts bold or italic values, the values ​​should be specified with a lowercase letter) and background can be combined with each other, i.e. it is allowed to set the element color, its style and the background color around:

 <dict> <key>fontStyle</key> <string>italic</string> <key>foreground</key> <string>lightcoral</string> </dict> 

Multiple scopes that will have the same color are entered separated by commas. Suppose we want an identical coloring for the opening and closing brackets of the <script></script> :

 <!-- HTML: угловые скобки тега <script>, открывающие и закрывающие --> <dict> <key>name</key> <string>Tag script brackets, open and closed</string> <key>scope</key> <string>text.html.basic source.js.embedded.html punctuation.definition.tag.begin.html, text.html.basic source.js.embedded.html punctuation.definition.tag.end.html </string> <key>settings</key> <dict> <key>foreground</key> <string>yellow</string> </dict> </dict> 

The result, after we set the colors to the scopes for all elements of the example.

It was :

It became :

Obtaining scopes :

You can find the active one, i.e., before or within which the caret is located, the element's visibility area by pressing Ctrl + Alt + Shift + P. The Scope appears in the Status Bar at the bottom of the Sublime Text 3 window.

However, from the status bar do not copy the necessary scope, you must use one of the three methods below. The plugins from adzenith and ttscoff , also intended to get scopes to the clipboard, did not work for me - apparently, they are for Sublime Text 2, but not Sublime Text 3.

UPD: Starting with build 3114, visibility areas are already displayed in a separate window, rather than a status bar, and can be copied.

The plugin from r-stein, which is discussed below, is not really needed anymore.

1. Plugin from r-stein

Perform the following operations:

a Copy to the clipboard the following code:

sublime.set_clipboard(view.scope_name(view.sel()[0].b))

b . We install the carriage (to put it simply, click the left mouse button) before or inside — but not after — the syntax element whose color we want to change.

in Ctrl + ` (typewritten reverse apostrophe, the symbol is located on the same key where the Cyrillic" ё ") → paste the code that we copied at the 1st stage into the opened input field, → Enter → our exchange buffer contains the necessary scope.

As you can see in practice, it is not very convenient. To simplify the execution of the operation is a plugin from all-r-stein.

1. Tools → New plugin ... → Insert the Python code into the opened file:

import sublime, sublime_plugin

class CopyScopeCommand (sublime_plugin.TextCommand):
def run (self, edit):
view = self.view
sublime.set_clipboard (view.scope_name (view.sel () [0] .b))
sublime.status_message ("Scope copied")

Ctrl + S → save the file as copy_scope.py .

2. We assign the shortcut to the plugin: Preferences → Paskage Settings → Mediawiker → Key Bindings - User → between [] enter in the opened file:
   
   

     // Копирование областей видимости { "keys": ["ctrl+7", "ctrl+o"], "command": "copy_scope" }, 

We save. In order for the combination to be surely not occupied by anything, I choose two-stage hot keys - that is, I enter Ctrl + 7 , then Ctrl + O , and only after two clicks the necessary command is executed. You can assign a one-step, only better make sure that the shortcut is free: Preferences → Key Bindings - Default → in the opened file Ctrl + F → temporarily disable the Regular expression button, otherwise you will not be able to find the + character → enter in the search form the key combination that you want to use , → if it is involved, choose another, which, however, may also be occupied by some of the plug-ins that you have installed.

3. (optional) Add a button to call the plugin in the context menu that appears when you right-click on any text entry area:

Preferences → Browse Packages ... → User → create a file Context.sublime-menu , if it does not exist, → insert it into the file

 [ { "command": "copy_scope" }, ] 

We save. If the file exists, and the command for another plug-in is specified in it, separate the objects with commas after {curly brackets}. Objects are enclosed in [square brackets] ( JSON syntax ).

 [ { "command": "lat_to_cyr" }, { "command": "copy_scope" }, ] 

The same remark about commas and parentheses applies to the preceding and following examples.

4. (optional) Add a button to call the plugin in the top menu:

Preferences → Browse Packages ... → User → create the Main.sublime-menu file, if it doesn’t exist, → enter:

 [ { "id": "edit", "children": [ { "command": "copy_scope" } ] }, ] 

We save.

5. We direct the carriage to or inside an element, the scope of which is to be found → call the command to get the scope using any of the methods - Ctrl + 7 , then Ctrl + O ; right-click on any text input area → Copy Scope ; Edit → Copy Scope - the scope is in our clipboard.

2. ScopeHunter online

The service only supports the syntaxes listed in the image below.

while methods 1 and 3 change the coloring of any elements of all Sublime Text 3 syntaxes. For example, I wrote a color scheme with wiki markup support, for me the option with ScopeHunter online was partially not suitable for me.

Go to the website TmTheme Editor → Gallery , if you use a ready-made color scheme, Open - your own (when the theme file is among the files of your computer, open it as described here , and the title to the local file will appear in the title the Sublime Text 3 window) → in the right in the bottom corner, select the required markup / programming language → Customize Preview Code → insert the same code where the elements are not highlighted as you need → Save → Scope Hunter → mouse over the elements → the required visibility area is displayed under the Current Scope line:

If the “Name” parameter is set for the selected visibility area (under the “Matching Rule”), then on the left we find the Score Name with the same parameter value as the “Name” → change colors in the web panel. Online preview available.

When, on the contrary, Name is not specified, you will have to create an XML array (see Where to insert ) and enter the scope in it.

Save → Download → save the file to where it was taken from.

Unfortunately, the work on the service is actually stopped , the result will be different from what you have in Sublime Text 3, sometimes strikingly. Screenshots of a single script, taken on June 13, 2016 in Sublime Text 3 and TmTheme Editor:

3. ScopeHunter plugin

Any syntax is supported. Install the plugin via Package Control → Ctrl + Shift + P → in the appeared input field enter one of two commands :

Scope Hunter: Toggle Instant Scoper - (knowing about the fuzzy search , you can enter shtis ) the solution when you need to change the colors of many elements. A console will appear at the bottom, where scopes will be displayed, automatically changing depending on whether the carriage is located before or within which element of the syntax.

To automatically add scopes to the clipboard, set the clipboard parameter to true : Preferences → Package Settings → ScopeHunter → Settings - User → paste the following code and save the file.

 { "clipboard": true, } 

When you are not going to work with scopes so that they do not interfere in the clipboard, set the value to false or stop the ScopeHunter command by restarting Sublime Text 3. However, sometimes it stops functioning for some unknown reason and you have to restart after Ctrl + Shift + P enter shtis .

Scope Hunter: Show Scope Under Cursor - suitable when you want to transform color one or more elements. After you close the console with the Esc key , to find out the scope again, you will have to type this command again.

If during the session in Sublime Text 3 you entered one of these commands, the other will not work before you restart Sublime Text 3.

Multiple cursors are supported. Hold down the Ctrl key and click with the mouse before or inside the elements whose scope you need to know. At the bottom of the console will appear scopes all at once. Example:

 Scope: text.html.basic source.js.embedded.html source.js meta.group.braces.round meta.brace.round.js ------ Scope: text.html.basic source.js.embedded.html source.js meta.group.braces.round meta.group.braces.curly variable.other.readwrite.js ------ Scope: text.html.basic source.js.embedded.html source.js meta.group.braces.round meta.group.braces.curly support.type.object.dom.js ------ 

Copy the scope (the one on the right, without Scope: with dashes).

Summary

on the considered methods of obtaining scopes:

1. Плагин от r-stein:
   Plus - the fastest getting scopes,
   Minus - there are no additional features.

2. ScopeHunter онлайн:
   Plus is a quick preview of the colors online,
   Cons - inactive developer and as a result, the lack of support for new changes; limited syntax support.

3. Плагин ScopeHunter:
   Plus - work at once with many areas of visibility,
   Minus - interruptions in the work of the plugin.

When I need to change the 1-2 scope, I use the plugin from r-stein; I need a quick preview - I go to TmThemeEditor; Well, if I thoroughly sit down to edit color themes, then I activate the ScopeHunter plugin.