Sublime Forum

JavaScript syntax highlighting changes in 3103

#33

If you want the changes now, download https://github.com/sublimehq/Packages/blob/master/JavaScript/JavaScript.sublime-syntax and places it in Packages/JavaScript/JavaScript.sublime-syntax and restart ST.

Just be aware if you don’t remove it after the next release you will be stuck with that version and won’t see any future fixes/tweaks.

0 Likes

#35

@wbond Thanks for that update! Now syntax coloring looks better, but still not perfect. For me personally dots/periods in JS aren’t that special to color them on red as other keywords…
Could you just give me a hint what part should I change in this JavaScript.sublime-syntax to bring dots color back to regular, i.e. white in Monokai? Thanks!

0 Likes

#36

The best way to solve this is copy the color scheme you want to use and add something like:

<dict>
	<key>name</key>
	<string>JS Accessor</string>
	<key>scope</key>
	<string>keyword.operator.accessor.js</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#F8F8F2</string>
	</dict>
</dict>

That way, as we improve the syntax over time, you don’t get stuck on an old version, but you’ll retain your color preferences.

2 Likes

#37

Worked great! Thanks for instant help :relaxed:

0 Likes

#38

Are there any resources on the basics of how the plist style .tmTheme filetype works and what the JavaScript.sublime-syntax provides?

It’s foolish, but I’m trying to update someone else’s Sublime Theme based on the latest developments of 3103.

0 Likes

#39

Try http://docs.sublimetext.info/en/latest/reference/color_schemes.html for color schemes and the basic sections of http://docs.sublimetext.info/en/latest/extensibility/syntaxdefs.html plus http://www.sublimetext.com/docs/3/syntax.html for syntax definitions.

We currently don’t do a good job at explaining the purpose of scopes, imo.

1 Like

#40

Found the same issue occurring when using Javascript within JSP files, especially after instance of < JSP: > declarations:

0 Likes

#41

Thanks for this @FichteFoll! It’s a great overview of the basics. So based on this package — https://github.com/sublimehq/Packages/blob/master/JavaScript/JavaScript.sublime-syntax — which part of the YAML ends up being the scoped setting that the .tmTheme references?

...
<dict>
      <key>name</key>
      <string>Comment</string>
      <key>scope</key>
      <string>comment</string>
      <key>settings</key>
      <dict>
         <key>foreground</key>
         <string>#75715E</string>
      </dict>
   </dict>
...

For instance in this example which property in the YAML corresponds to the comment?

0 Likes

#42

I usually ctrl+f for the scope name in this case.

1 Like

#43

Hi wbond, unfortunately I don’t have the paid Sublime Text 3 version and cannot get the new highlighting changes from dev. I followed your directions to put a JavaScript folder into Data/Packages, along with the sublime-syntax file, but unfortunately I receive this error when restarting ST:

Error loading syntax file “Packages/PHP/PHP.sublime-syntax”: Error in regex: invalid backref number/name in regex (?=^\2\b)

Which is odd, because I haven’t touched PHP? I’m using the Portable Sublime Text version. When I set the syntax of a file to HTML, I successfully see the scope of the $ is .dollar, so I know the change is taking; it just breaks my PHP syntax for some reason.

0 Likes

#44

I’ve just found a way to tweak the syntax to not hit the condition causing the PHP error. If you grab the latest copy, it should work much better now.

0 Likes

#45

You’ve done it! My hero!

0 Likes

#46

Howdy,

My main issue is still that I wish the $ symbol in jQuery could be highlighted red, as it was before for me in the Monokai theme. A couple others chimed in as well: Lost jQuery highlighting, upgrading from 3083 -> 3103. All the other changes don’t really bother me. I understand that the update was to improve the syntax highlighting, so I appreciate the work!

Just wondering if there’s a way I could customize my JS highlighting, for the $ symbol? Or am I understanding that with the updates to JS syntax, the $ is no longer a special scope that can be targeted?

Thanks

0 Likes

#47

You just need to add punctuation.dollar in your color scheme.

0 Likes

#48

Build 3107 with Monokai highlights the $ in red.

1 Like

#49

Gotcha! I installed 3107 and see that that highlighting is back. However, I also liked having jquery objects prefixed with a $ to differentiate them from non jQuery variables. It doesn’t seem to pick that up. Example “var $someElement = $(’.some-element’);”. First one is not highlighted, second one is.

Would editing my color scheme to add puncutation.dollar add in the remaining highlighting I’m looking for? I also don’t quite see where to grab the existing color scheme / insert a new rule. The stackoverflow questions seem to be a little outdated - perhaps because of the recent updates to syntax?

0 Likes

#50

Yes adding the rule would work.
You can find the color scheme in the file Color Scheme - Default.sublime-package in your install directory (for windows it’s C:\Program Files\Sublime Text 3\Packages).
You can unzip this file, take the theme you want, copy it in a directory “Color Scheme - Default” (to override the default one) inside your package directory and add somewhere

	<dict>
		<key>name</key>
		<string>Dollar</string>
		<key>scope</key>
		<string>punctuation.dollar</string>
		<key>settings</key>
		<dict>
			<key>foreground</key>
			<string>#F92672</string>
		</dict>
	</dict>
1 Like

JavaScript Syntax Highlighting different in ST3?
#51

I’d recommend looking at the source https://github.com/sublimehq/Packages/blob/master/JavaScript/JavaScript.sublime-syntax and searching for dollar.

That way you can see all of the various scopes for “dollar” identifiers. There are quite a few since identifiers can be variables, class names, object keys, etc. Then you can decide if in a given context you want to override the standard color.

1 Like

#52

Aha! This is very helpful. I’m so close to getting it back. I have $variable highlighting $. However, when the variable is accessing a method (which puts it in what, the object scope?), the highlighting stops. Specifically as soon as there is a paren. Eg $variable.example(). Perhaps because an object has a different scope that’s overriding the dollar punctuation scope?

  1. I’m not sure quite what this scope is called, that is overriding.
  2. Can you combine scopes? For example, if there was a scope for a variable that is an object, combining that with dollar.punctuation to only highlight the dollar.

Not sure if my understanding of what is happening is correct, but that’s my best guess at this point.

vs

0 Likes

#53

Nevermind! It works as expected once I updated to 3109 :slightly_smiling:

What I did specifically was follow Clams instructions to add his suggested syntax highlighting rule, to Monokai (I copied Monokai and altered the copy to include it). On OS X, you can find the Monokai theme at ~/Library/Application Support/Sublime Text 3/Packages/User. Just copy Monokai(SL) and make any changes you want. Then in ST, Preferences->Color Scheme->User you should see your theme.

0 Likes

Lost jQuery highlighting, upgrading from 3083 -> 3103