How to Add Syntax Highlighting to Sublime Text 2

Custom syntax highlighting in Sublime Text 2

Sublime Text uses the same syntax highlighting as TextMate. The grammar can be found here. I'd recommend working in JSON then converting to XML, since it's easier (at least it is for me) to read. The PackageDev plugin will give you a starting snippet for defining a new syntax. It also contains some syntax highlighting for configurations, as well as a Plist to JSON converter. Below is a snippet from a protobuf syntax definition file that highlights specific words. As for the colors of the highlights, you will have to look through your color scheme file. In the below example, you would look for the scope "constant.language" for the color it uses. You probably don't need to edit the color scheme, unless you want something other than what is already built into your scheme.

{ 
"name": "Protocol Buffers",
"scopeName": "source.proto",
"fileTypes": ["proto"],
"patterns": [{
"match": "\\b(bool|bytes|double|fixed32|fixed64|float|int32|int64|sfixed32|sfixed64|sint32|sint64|string|uint32|uint64)\\b",
"name": "constant.language.proto"
}],
"uuid": "8c8714d5-43ef-43d2-abd9-c9088901ddd5"
}

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

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.

How to add syntax highlighting to sublime text 2

If you dig into the included Dawn.tmTheme file (one of the only included themes that does this highlighting properly) you'll find these highlighting rules for String embedded-source, for some reason some of the themes leave this out completely:

<dict>
<key>name</key>
<string>String embedded-source</string>
<key>scope</key>
<string>string source</string>
<key>settings</key>
<dict>
<key>background</key>
<string>#6F8BBA26</string>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#080808</string>
</dict>
</dict>

Syntax Highlighting in Sublime Text 2

That regex would work (I believe) if you had something along the lines of typedef foo; To get the behavior you want, you will have to create a slightly more complex pattern entry in the tmLanguage file. As the language file is based on TextMates, you will want to have this as a reference (http://manual.macromates.com/en/language_grammars#language_grammars). I would also recommend using PlistJsonConverter (working in JSON is easier for me than working in XML). You will probably need to define begin and end patterns (begin will probably be typedef end will probably be ;). You can then apply whatever patterns you want to that group.

As for the class name highlighting, I would look to see what, if any scopes are being applied. If none are, you will have to come up with a regex to apply the scope to those. You can then add a color entry, or use a defined one from the color scheme.

Edit:

Actually they don't appear to be JSON. I see () rather than []. JSON is pretty simple to understand. You can look for something more in depth, but wikipedia is a good place to start. What you would probably be interested in are the things under the "Rule Keys" section. I did some searching (because I knew there were some better examples out there), and came across http://docs.sublimetext.info/en/latest/extensibility/syntaxdefs.html . It goes over syntax definitions from scratch, but the most relevant section is probably http://docs.sublimetext.info/en/latest/extensibility/syntaxdefs.html#analyzing-patterns. I don't have a regex to find class names, so you would have to come up with one yourself. If you haven't already though, you may want to search around to see if someone else has implemented a language file in a way that works for you.

You will want to start with the built in tmLanguage file and convert that from a Plist to json. You can then edit that file and move it back.

Is there syntax highlighting for assembly in Sublime Text 2?

No, but since Sublime Text 2 can read Textmate language definition files (.tmLanguage files), you could easily add support to Assembly by copying something like https://github.com/foxostro/x86-assembly-textmate-bundle to your "Packages" directory (C:\Users\hugo\AppData\Roaming\Sublime Text 2\Packages on my Win7).

Changing syntax highlighting in Sublime Text 2

Figured it was LaTeX, but wanted to make sure. So, there are 2 possible fixes for this.

The first is to define quotes properly. That is, using " renders incorrectly. I'll be honest, I didn't know about that until I came across the following post (link). I think this would be the correct thing to do.

The second method is to modify the tmLanguage file. The following scope is being applied to that string invalid.illegal.string.quoted.double.latex. You can remove the associated pattern from the tmLanguage file, and it should stop that highlight from occurring. If you want to take this route, let me know and I can provide some additional instructions on how to do it.



Related Topics



Leave a reply



Submit