Modifying Sublime Text 2 for JS

Question

I am almost a beginner to programming outside "Mathematica".

I use Sublime Text 2 and mostly need to code in JS, and I would like to use a different color theme than the one already present in preferences.

For example, I would like to use this theme

My attempt installing Eclipse have yet failed, I am using a mac with the latest version of Lion.

Answer 1

Most themes have support for JavaScript syntax highlighting. If it does not appear automatically, it may be because SublimeText does not recognize the file as containing JavaScript. You can force it by going to View > Syntax > JavaScript > JavaScript.

If you need to define a particular syntax, you will have to build your own syntax definition. That guide has a step-by-step process.

I would suggest copying the existing JavaScript syntax definition and refining it further, if you need to add or change a few definitions. The syntax definitions are defined by regular expressions, and held within an XML file. If your variables can be differentiated by a specific regular expression, you will be able to color-code them with a separate rule.

Sublime Text 2: diff syntax highlighting with a light background color scheme gives a succinct example of updating a theme to show different colors for new syntax.

Answer 2

Sublime Text 2 has got 22 different themes that you can change using the menu (Preferences > Color Scheme). I think there are some of them similar than what you want. :)

Another known theme is Soda: https://github.com/buymeasoda/soda-theme

If you want to create your own theme, you can copy one of the available and modify it. The themes are located at "Color Scheme - Default" in the data directory, copy one of them, modify it and select it in the menu (Preferences > Color Scheme).

The data directory depends on your SO:

• OS X: ~/Library/Application Support/Sublime Text 2
• Windows: %APPDATA%\Sublime Text 2
• Linux: ~/.config/sublime-text-2

Regards, Armando

Answer 3

As noted by ms4py, what you need is a Color Scheme. Sublime Text (and ST2) use the old format supplied by TextMate, .tmTheme. Basically it's an xml document with specific markup.

Check the application menu "Preferences" > "Browse Packages" and a Finder window will pop up to Sublime's packages folder. There you'll find the folder "Color Scheme - Default" which contains your installed default themes, including iPlastic.tmTheme.

Simply open the file in a text editor (ST will do just fine ;) ) and change the parts you want to adapt, e.g. to change your "Keywords" style find:

<dict>
  <key>name</key>
  <string>Keyword</string>
  <key>scope</key>
  <string>keyword</string>
  <key>settings</key>
  <dict>
    <key>foreground</key>
    <string>#0000FF</string>
  </dict>
</dict>

and adjust the foreground color (#0000FF in this case) to your liking. You can find other supported attributes throughout the file, e.g. foreground, background or fontStyle.