Javascript syntax highlighting within a template tag



How can I highlight javascript code within a Twig template tag? For example:

I would like the code between {% js %}...{% endjs %} to highlight and behave as if it were between <script>...</script>

Thank you.


This is how language-html does it. If you have control over the grammar for the Twig template language, it’s relatively simple to add that code and change a few things (the regular expressions, and make the outside scope include .twig instead of .html). If you’re just wanting this for your own use, you can fork language-twig and install it locally using git clone to put the code on your hard drive and then running apm link inside that directory to tell Atom to look at your folder.


Thanks much. Very helpful.

Slight clarification for the record: Craft CMS Twig templates actually use the .html extension. So if one wanted to hack a solution for Craft CMS Twig templates, it would be to the language-html package.


It’s possible for a grammar to declare that it injects itself into others. I believe this is based on scope though, so you might need the HTML grammar to mark it anyway. I could be wrong though.


One can make grammar packages that use the same file extensions as mainstream languages. I believe that Atom’s grammar detection system will prefer to choose a community package over a core package (deferring to the user’s desires whether or not the user is wise enough to know that’s what they’re getting), but even if not it’s a very simple config file addition to tell your Atom to use a specific grammar for a common extension.