Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 237
Niklas Avatar asked Aug 05 '13 21:08

Niklas


People also ask

How do I change syntax in Sublime Text 3?

To enable Syntax Highlighting click on “View” in the top bar, then hover your mouse over “Syntax”, and select your programming language from the list. Alternatively, if you save a document with a supported file extension, Sublime Text 3 will automatically apply the Syntax Highlighting for that language.

How do I select a programming language in Sublime Text?

Click the Plain Text label at the bottom right of the window and select your language. Alternatively, select your language in the menu at View » Syntax, or open your command palette ( Ctrl Shift P ) and type ssjava (equals to Set Syntax: Java ).

How do I change the default syntax in Sublime Text?

In the current version of Sublime Text 2 (Build: 2139), you can set the syntax for all files of a certain file extension using an option in the menu bar. Open a file with the extension you want to set a default for and navigate through the following menus: View -> Syntax -> Open all with current extension as...

How do I change the syntax color in Sublime Text?

Go to the folder where sublime_text3 binary is. Go to Packages folder Open Color Scheme - Default. sublime-package Find the concern color scheme. Open it in some editor and change the values as per requirement.


2 Answers

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

like image 22
Niklas Avatar answered Oct 12 '22 14:10

Niklas


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.

jQuery highlighted with Neon Theme

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:

JavaScriptNext

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.

like image 151
MattDMo Avatar answered Oct 12 '22 12:10

MattDMo