4

Does anyone know how to get PHPStorm interpret {% js %} as <script> for correct syntax highlighting in PHPStorm?

Background: I'am always doing this:

{% js at endBody %}
    {% if false %}<script>{% endif %}
    document.querySelector('body').classList.add('overlay');
    {% if false %}</script>{% endif %}
{% endjs %}

which I would like to avoid.

1
  • No solution yet. Here's the topic > ticket on Jetbrains site Commented Apr 19, 2021 at 14:10

1 Answer 1

10

You can do this using PhpStorm’s Language Injections feature.

In fact, as of PhpStorm 2017.3, it has included support for {% script %} tags out of the box.

To extend that to {% js %} tags, go to PreferencesEditorLanguage Injections, and search for “twig: custom statement javascript”. Double-click on it to edit it, and add the following line to the Places Patterns setting:

+ twigCustomStatement("js")

The “twig: custom statement javascript” language injection settings

Click OK and then Apply to save.

You can also add support for interpreting {% css %} tag contents as CSS by duplicating that language injection, setting its Language ID to CSS, and setting its Places Pattern to:

+ twigCustomStatement("css")
The settings for a new CSS language injection
3
  • Very nice. Any idea, if it is possible to make this valid with your solution: var host = '{{ craft.request.hostInfo }}'; Without script tags inside PHPStorm will complain. Commented Apr 21, 2021 at 14:14
  • @MatthiasRedl-Mann I’m not sure if that’s possible, sorry. Commented Apr 22, 2021 at 1:15
  • It works fine, but every css class inside csstwig tag is colored gray, like normally does if in this file there is no html element that uses that class. Commented Jan 14 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.