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

User · Answer

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

User · Answer

Syntax highlighting is controlled by the theme you use  accessible through Preferences - gt  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 - gt  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

User · Answer

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

User · Answer

The  this  is already coloured in Javascript   View- Syntax-  and choose your language to highlight

User · Answer

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

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

Examples related to syntax-highlighting

Examples related to sublimetext3