Sublime Forum

Editing a syntax coloring

#1

Where would I create a modification to Javascript syntax to highlight the entire word following a $, not just the $, as below:


0 Likes

#2

You need to modify the ‘JavaScript.tmLanguage’ file - save a copy outside of the Packages folder firstly (just in case).

Search for support.function.event and modify the code to the following. (That is, adding in a new section.)

<key>name</key> <string>support.function.event-handler.js</string> </dict> <dict> <key>match</key> <string>(\$[a-zA-Z_][a-zA-Z0-9_]*)\b</string> <key>name</key> <string>meta.variable.js</string> </dict> <dict> <key>match</key>
This gives ‘$something’ the scope meta.variable.js, although there is probably a more official/correct name to chose.

Then you need to modify your chosen ‘.tmTheme’ file to slip in:

<dict> <key>name</key> <string>Meta variable (JavaScript)</string> <key>scope</key> <string>meta.variable.js</string> <key>settings</key> <dict> <key>fontStyle</key> <string></string> <key>foreground</key> <string>#FF0000</string> </dict> </dict>
#FF0000 is red, but you can chose a different colour :wink:

It works for me on a brief testing, but you may find it impacts other scopes/colours. Hopefully it shouldn’t, as the JS syntax file is fairly straight-forward (unlike Python!).

0 Likes

#3

If using jQuery there may be a Package somewhere that assists.

0 Likes

#4

I think **support **is a more appropriate term, rather than ‘meta’: support.variable.jquery.js

Once you’ve got this working, you might consider modifying the code again, to include all jQuery methods:

<string>support.function.event-handler.js</string> </dict> <dict> <key>match</key> <string>(\$[a-zA-Z_][a-zA-Z0-9_]*)\b</string> <key>name</key> <string>support.variable.jquery.js</string> </dict> <dict> <key>match</key> <string>(?&lt;=\.)(add|addClass|after|ajax|ajaxComplete)\b(?=\()</string> <key>name</key> <string>support.function.jquery.js</string> </dict>
This recognises jQuery methods when preceded by a dot and followed by an opening bracket (.

These would have the scope support.function.jquery.js and you could colour them in your theme file. [Note that, if there is already a JS or DOM method of the same name, then that version’s colour would take precedence.]

With a bit of effort it would be possible to colour-code the brackets that follow the jQuery method, and possibly even to recognise things like attribute selectors. I’m not sure I’ll pursue this myself though, as it would require people to modify/replace their ‘JavaScript.tmLanguage’ file :astonished:

0 Likes

#5

I wish these tmLanguage/bundle files were pulled from an official github (or other public) repository on Sublime install - one which we could submit updates to.

0 Likes

#6

Agreed.

0 Likes

#7

In package manager there’s only one for snippets, not syntax coloring.

0 Likes

#8

[quote=“handycam”]

there may be a Package somewhere that assists.

In package manager there’s only one for snippets, not syntax coloring.[/quote]

Im not sure if there is already one out in the wild but I suppose you could create a new JQuery.tmLanguage file that extends the javascript syntax.

0 Likes

#9

[quote=“atomi”]

there may be a Package somewhere that assists.

In package manager there’s only one for snippets, not syntax coloring.

Im not sure if there is already one out in the wild but I suppose you could create a new JQuery.tmLanguage file that extends the javascript syntax.[/quote]

How do we create a language file that extends an existing one? I wasn’t aware we could do this. Andy.

0 Likes

#10

Create a new file named JQuery.tmLanguage and add

... add custom jquery matches before include

<key>include</key>
<string>javascript.source</string>

0 Likes

#11

Thank you @atomi. Is this a document fragment, with the matches included within … , or do I need all the other trimmings - like the DOCTYPE and a UUID?

0 Likes

#12

That’s a fragment. You’ll need at least the following to make it useful:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>fileTypes</key>
	<array>
		<string>FILETYPE</string>
	</array>

	<key>name</key>
	<string>NAME</string>

	<key>scopeName</key>
	<string>SCOPENAME</string>

	<key>patterns</key>
	<array>
		...]
	</array>

</dict>
</plist>
0 Likes

#13

Thank you @nick.

I found a jQuery.tmLanguage file, which just needs to be updated with more recent jQuery methods :smile:

[BTW I couldn’t have taken this approach with my additions to the Python language, as it’s tmLanguage file is… a minefield :laughing:]

0 Likes

#14

[quote=“agibsonsw”]Thank you @nick.

I found a jQuery.tmLanguage file, which just needs to be updated with more recent jQuery methods :smile:

[BTW I couldn’t have taken this approach with my additions to the Python language, as it’s tmLanguage file is… a minefield :laughing:][/quote]

Seems that a lot of the language files are very dense, and many are not up to date. I’m working through Perl from scratch (see signature), and have plans to continue through other languages. Feel free to push/pull from my repo; maybe we can get such a repo added to the Sublime organization on github?

0 Likes

#15

@nick. I’ve managed to create a repo and update it, but I haven’t yet discovered what pulling/ forking, etc. mean :laughing: (grokking and borking also sound unpleasant…)

I’ve (eventually) managed to persuade Python.tmLanguage to behave as I’d like; in particular, I’m able to colour-match brackets - which is kinda cool :smiley:. But I’m still tempted to delete the whole of the repository, remove, temporarily, all includes and delete any reference to dotted or generic names! This file is 2000+ lines, whereas JS is 700+ - and they are not *that *different…

0 Likes

#16

I’ve found it helpful to immediately fold at level 3 when working with language files. Even my Perl from scratch is approaching 3000 lines, that seems to be a byproduct of XML and the many different ways to do things in Perl. Python may be of similar syntactic complexity. I think my file is better simply for the whitespace and comments, and because I’m making better use of the repository.

I could be wrong, but I believe a pull means you’re downloading someone’s repo to your own system. If you then make changes and submit them (to your repo) that’s a push. Then the original repo can pull from your changes. It’s described better here.

Edit: I decided to learn it a bit more in depth. This page has more information about the process.

0 Likes

#17

Thank you @nick. I shall read through those links.

0 Likes

#18

@agibsonsw Sorry for the tmLanguage fragment. I had just guessed you were more familiar with the basic tmLanguage format.
Regardless, I should have definitely posted the complete file.

Also based on your posts, I figured the jquery repo you decided to contribute to is on GitHub, but I wasn’t able to find it.
I’d love to check out your work on this too.

@nick I saw your Perl.tmlanguage file. It is really nice work and nicely (really nicely) documented too. :smiley:

I decided to develop the ColdFusion.tmLanugage, ColdFusionComponent.tmLanguage and CFscript.tmLanguage files in somewhat of an unorthodox manner.
One which I feel may make nesting scopes, in this particular case, superfluous.

For example ColdFusioComponent.tmLanuage defaults to source.cfscript defined in the CFScript.tmLanguage file but includes cfml scope defined in the ColdFusion.tmLanguage when a cfcomponent tag is encountered. If you could comment on this particular strategy I would really love to hear your thoughts.

github.com/SublimeText/ColdFusion

0 Likes

#19

@atomi

Here’s the jQuery bundle I found, although I haven’t attempted to update it yet.

I’m still wrestling with tmLanguage :wink:. I’ve managed to hack the Python language syntax so that it behaves for me. In particular, I achieved colour-coordinated brackets :smiley:. But it is, I believe, unnecessarily complicated. (There are 600+ lines to handle single-quoted strings, and this is repeated for double-quoted strings.)

I wish you well with your ColdFusion endeavours. Andy.

0 Likes

#20

@agibsonsw Thanks.

Oh okay I asked because I see another jquery bundle.
This one is available through package control github.com/SublimeText/jQuery and it’s actively maintained.

0 Likes