[RESOLVED] jQuery API Highlighting


First of all, I sincerely sorry if this was already asked, but I was not able to find an answer here.I’m newbie in the development world, so I was not able to hack Atom to find answers myself, so decided to ask: Why Atom do not highlight jQuery API? I’ve downloaded jquery-snippets package thought it would now “understand” the jQuery library, but simple things like $, .append, .add etc. do not highlight even like functions, just a grey text?

I would really appreciate if you can help me understand how to configure Atom for this, thanks in advance!


You downloaded a snippets package. Snippets have nothing to do with syntax highlighting. With snippets you can write part of code and autocomplete it by pressing tab.

As jquery has no unique syntax, but is just a JavaScript library I am not quite sure what you would like to have highlighted different from vanilla syntax anyways. :slight_smile:
Maybe your syntax-theme is not coloring JS functions the way you like? Try the default syntax theme (if you tried a different one) or experiment with one you might like.


Hey! Thanks for a reply. Yea, I understood what snippets do but I thought that if snippets add jQuery methods to autocomplete then editor will highlight them the same way as JS vanilla functions so it doesn’t look like a plain text. I hope that make sense.


Well, on my side, JS-function calls are in standard font color. Only function definitions are highlighted differently. Does it look different for you?


Nope, I have the same look. What I was expecting is to highlight stuff like for example:

$(‘some stuff here’).click(‘stuff here’); // if you check this, ‘click’ will be highlighted in color like ‘aqua’

but if you write something like this:

$(‘some stuff here’).append(‘stuff here’); // ‘append’ will be just a grey plane text. I was under impression that it should highlight it somehow (for e.g. ‘aqua’ color like ‘click()’ )

P.S. Sorry I can’t paste my view in Atom, at office at the moment and we are not allowed third party software installed on our desktops.


If you put the cursor at the click and open (via ctrl + shift + p) the log cursor scope view. You can see that click() is captured by the language-javascript package as support.function.dom.js and is therefore highlighted differently (as it is being captured as a known support function for the DOM).

Investigating further it seems as the following functions are highlighted differently:

  • substringData
  • submit
  • splitText
  • setNamedItem
  • setAttribute
  • setAttributeNode
  • select
  • hasChildNodes
  • hasFeature
  • namedItem
  • click
  • close
  • cloneNode
  • createComment
  • createCDATASection
  • createCaption
  • createTHead
  • createTextNode
  • createTFoot
  • createDocumentFragment
  • createProcessingInstruction
  • createEntityReference
  • createElement
  • createAttribute
  • tabIndex
  • insertRow
  • insertBefore
  • insertCell
  • insertData
  • item
  • open
  • deleteRow
  • deleteCell
  • deleteCaption
  • deleteTHead
  • deleteTFoot
  • deleteData
  • focus
  • write
  • writeln
  • add
  • appendChild
  • appendData
  • reset
  • replaceChild
  • replaceData
  • move
  • moveNamedItem
  • moveChild
  • moveAttribute
  • moveAttributeNode
  • getNamedItem
  • getElementsByName
  • getElementsByTagName
  • getElementById
  • getAttribute
  • getAttributeNode
  • blur

Besides the .dom, there are other special capture groups in defined as support.function. Sorry to be of no further help. :confused:
To accomplish the behaviour you want, a package would have to add certain function names to a capture group like support.function to be picked up by. Not sure if there is one, that does that for jquery specific functions.


Wow, that was informative, thanks a lot! Will try to dig further, but at least now I know why it’s not highlighted :slightly_smiling:


In Atom 1.4 functions and previously not highlighted syntax is now highlighted. Great!