Change / Add syntax highlighting for a language in Sublime 2/3

Question

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.

Quadragesimal

Answer 1

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.

Terat

I installed the Package Control and your Better JavaScript. How can I set the scheme to yours? It is not listed under Color Scheme. – Quadragesimal

Did you install "Neon Theme" through Package Control as well? Once you have, go to Preferences -> Color Scheme -> Neon Theme and pick Neon. – Terat

If you install packages through Package Control, they are automatically stored in the correct spot, in this case %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. Selecting the menu option above will update your Packages\User\Preferences.sublime-settings file automatically as well. – Terat

@Terat -- wow, this was very thorough. I am just trying to do some syntax color and editing reinforcement for an XML-like markup. But having some trouble figuring out how to get started with something super simple. Where could I begin to either reverse-engineer or, better yet, get a tutorial on creating one from. – Cobbler

@Angela, are you trying to make a language definition or a color scheme? – Terat

@Terat I guess it's a color scheme....I'm not exactly sure, after reading your docs, I think color scheme and being able to parse specific tags and words by color. – Cobbler

This isn't helpful if you don't want the hassle of trying to install packages... I guess it is my corporate linux environment being restrictive or oddly setup, but I have wasted half an hour with these packages, package managers, renaming files to .ZIP and back... nothing works, no new menu entries in Sublime3... no new syntax. Is there a way to JUST ADD NEW SYNTAX? The syntax is ALL I WANT, which I can see here: bitbucket.org/Clams/sublimesystemverilog/src/… – Dermatoplasty

@Dermatoplasty if all you want is the .sublime-syntax file, then just download it and copy it to ~/.config/sublime-text-3/Packages/User. It will then be available in the syntax menu at the very bottom right of the Sublime window, either on its own (it will say "SystemVerilog") or under the User submenu, depending on your setup. If you want the whole package, make sure Package Control has been installed correctly, the open the command palette, type pci, hit enter, search for SystemVerilog, and hit enter. You shouldn't have to rename any files or anything - why were you doing that? – Terat

@Terat perfect! Thanks a ton!!!! I was renaming the packages already installed to .ZIP so I could manually unpack them and try to make sense (since the bitbucket didn't seem that have a packaged file, only separate files). – Dermatoplasty

Answer 2

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>.

Quadragesimal

yes, this is the clunky work-around we all need to get used to as we approach the brave new world of Sublime Text 3. I'm sure there will be plugins before long that allow much easier .sublime-package editing... – Terat

That plugin is here - it's called PackageResourceViewer and can be installed via Package Control. It makes working with Sublime Text 3 .sublime-package files much easier, and I highly recommend it if you're planning on doing any kind of customization to ST3. – Terat

Where did you find the reference for these rules? – Hartle

^ What they said. Also I don't understand when / where you "select" the "this" keyword in the code, why this only colors the "this" keyword. Can you please explain it? – Customer

Second string afaik @Zelphir variable.language (this.xxx) maybe? Cannot find any documentation though for what kind of keys we can use – Dropsy

here is the doc Text Mate Language Grammars and Sublime Text documentation for syntax definitions – Formenti

Answer 3

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.

Hakeem

I don't see anything in there about colors. However, your answer was the closest to what I was needing. Instead, I edited the Monokai.tmTheme as per this SublimeText forum post in order to get JSON syntax highlighting to work. – Zoltai

The specific instructions in this answer were for editing the language definition. While this won't let you directly edit the colors of a color scheme, it will allow you change how certain types of scopes are found and thus how the color scheme interprets (and colors) the language. The plugin will open any type of resource in Sublime so you can similarly edit the color schemes directly with the same tool. For instance, I'm fond of the Tomorrow Night color scheme so I would open Tomorrow-Night.tmTheme with this plugin to edit that color scheme. – Hakeem

Answer 4

The "this" is already coloured in Javascript.

View->Syntax-> and choose your language to highlight.

Alkylation

Just what I was looking for: View -> Syntax -> Open all with current extension as... to set e.g. *.stan files with C++ syntax coloring. – Seethrough

Answer 5

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.

1. Install Package: PackageResourceViewer

2. Ctrl+Shift+P > [PackageResourceViewer: Open Resource] > [Color Scheme - Default] > [Marina.sublime-color-scheme] (or whichever color scheme you use)

3. 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]

4. 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)"
        },

5. Search for the string "blue6": to find the color variable definitions section. I found it in the "variables" section.

6. Pick a new color using a tool like http://hslpicker.com/ .

7. 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").

8. 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

Handicapped