List of colors for HighlightWords Sublime plugin

Issue

I know how to add new colors to the HighlightWords plugin list. However I’m having trouble adding more than the default options in there.

Can you please help me adding more colors to the list?

Here is what I currently have:
enter image description here

"colors_by_scope": [
    "string",
    "entity.name.class",
    "variable.parameter",
    "invalid.deprecated",
    "invalid",
    "support.function",
    "source.json meta.structure.dictionary.json comment.line.double-slash.js ",
    "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json constant.language.json "
],

Solution

Short Answer

The list of available scopes for you to use is determined by the color scheme you’re currently using, and so need you to look inside the color scheme file to see what is currently available to you.

To do that you can refer to your user settings to see what the color_scheme preference is set to and then use PackageResourceViewer to open up that file and look at the scopes that it defines.

Alternately, there is sample plugin code at the bottom of my answer that attempts to load your current color scheme and tell you all of the unique scopes by name.


Side note: It’s a common trap to think of your Theme as your Color Scheme, but they’re different things; the Theme sets the overall look of Sublime (such as the shape of the tabs) while the Color Scheme sets the syntax highlighting colors.


Long Answer

Scopes are tied to how syntax highlighting works in Sublime, which goes something like:

  • The syntax specification of the current file uses rules to break the contents of your file into parts based on what they represent in that type of file
  • The different parts of the file are assigned one or more scopes that uniquely identify them
  • The color scheme assigns colors to your code by assigning colors to scopes

So for example in an HTML file, the HTML syntax says that the html in <html> has the scope entity.name.tag, but your color scheme says that the scope entity.name.tag should be red. Similarly, the < and > have scopes that indicate that they are punctuation, and the color scheme says that punctuation should be white.

Sublime uses the tmTheme format (taken from TextMate) to specify what colors associate with what scopes. It’s an XML formatted file in Plist format. If you use the above mentioned PackageResourceViewer to open the color scheme that you’re currently using, you will see (among other things) a bunch of sections that look like this:

<dict>
    <key>name</key>
    <string>Comment</string>
    <key>scope</key>
    <string>comment</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#75715E</string>
    </dict>
</dict>

This indicates that for the scope comment, the foreground color of the text should be #75715E. It’s also possible to change the font style (bold or italic) as well as the background color.

To save you the hassle of trying to dig the correct information out of the XML of the tmTheme file, you can select Tools > Developer > New Plugin... from the menu, and then replace the stub code you see with the following python code and save it as explore_scopes.py in the location that Sublime defaults to:

import sublime
import sublime_plugin
import xml.etree.ElementTree as ET

class ExploreScopesCommand(sublime_plugin.WindowCommand):
    def run(self):
        try:
            settings = self.window.active_view().settings()
            scheme = settings.get("color_scheme")
            xml = sublime.load_resource(scheme)
            self.process_scheme(ET.fromstring(xml))
        except:
            sublime.status_message("Error loading color scheme")
            raise

    def process_scheme(self, color_scheme):
        settings = color_scheme.find("./dict/array")
        if settings is None:
            return sublime.status_message("No color scheme settings found")

        scopes = list()
        for child in settings:
            self.get_scope(scopes, child)

        new_view = self.window.new_file()
        new_view.set_scratch(True)
        new_view.set_name("Available Scopes")
        new_view.run_command("append", {"characters": "\n".join(scopes)})

    def get_scope(self, scopes, setting):
        for i in range(0, len(setting), 2):
            if setting[i].tag == "key" and setting[i].text == "scope":
                scopes.append(setting[i + 1].text)

With that in place, you can bind a key to the explore_scopes command, or just open the Sublime console with View > Show Console or Ctrl+` and enter the following:

window.run_command("explore_scopes")

This will open a new tab in the current window named Available Scopes that will show you all of the scopes that exist in the currently set color scheme. What you see depends on the version of Sublime you have installed and what your color scheme is set to.

As written this supports pulling the color scheme from whatever file is currently focused in the window (if any). So if you have a setup with different color schemes set for different types of files, select the correct file type before you run the command.

Answered By – OdatNurd

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.