Syntax Highlighting about csjs HOT 6 CLOSED

I decided to take a stab at some meager syntax highlighting support for Atom. I'm happy to announce it was easier than anticipated.

This Atom package basically provides default javascript support with css syntax highlighting for anything inside the tagged string template csjs``.

Lemme know what you think!

https://github.com/neurosnap/language-csjs
https://atom.io/packages/language-csjs

It was really easy to include syntax highlighting from other languages in Atom, so this package could be use for other template strings pretty easily.

from csjs.

I wanted to also add that I managed to get autocomplete support for CSJS files in Atom as well. It is a separate package:

• https://github.com/neurosnap/autocomplete-csjs
• https://atom.io/packages/autocomplete-csjs

Syntax highlighting works with javascript expressions now as well:

• neurosnap/language-csjs#3

To clarify, this will only work when the language selected for the file is CSJS.

from csjs.

I ported @neurosnap's syntax highlighter to VS Code:

https://github.com/colejd/vscode-language-csjs

It's not totally done yet -- it seems that for highlighting JS-in-CSS-in-JS using a TextMate grammar like VS Code or Atom does, you basically need to copy the entire CSS grammar and figure out the places where a ${} block might appear. If anyone knowledgeable about TextMate grammars stumbles on this, I'd really appreciate some help!

from csjs.

@scott113341 posted a cool way to get CSS syntax highlighting with WebStorm/IntelliJ IDE:
#28 (comment)

Other than that, it'd be cool for some generic way to get syntax highlighting within template strings. For example HTML syntax highlighting with https://github.com/substack/hyperx or CSS within CSJS. But at this time I'm not aware of any way to do that in editors other than IntelliJ.

from csjs.

Wow, that is super awesome! I'll have to try it out (and add it to the docs)

from csjs.

I've noticed that Atom, by default (using dark theme), will use the css syntax if the tag method is called css, instead of csjs. Unfortunately, even if I create an alias in my code, some plugins (like the babel-plugin-csjs-postcss) are counting on the tag being named csjs.
Is there an easier way to handle this besides forking the plugin?

from csjs.