<p>You can do this using PhpStorm’s <a href="https://www.jetbrains.com/help/phpstorm/language-injections-settings.html" rel="noreferrer">Language Injections</a> feature.</p>
<p>In fact, as of PhpStorm 2017.3, it has included <a href="https://blog.jetbrains.com/phpstorm/2017/12/twig-handling-improvements/" rel="noreferrer">support for <code>{% script %}</code> tag</a>s out of the box.</p>
<p>To extend that to <code>{% js %}</code> tags, go to <strong>Preferences</strong> → <strong>Editor</strong> → <strong>Language Injections</strong>, and search for “twig: custom statement javascript”. Double-click on it to edit it, and add the following line to the <strong>Places Patterns</strong> setting:</p>
<pre><code>+ twigCustomStatement(&quot;js&quot;)
</code></pre>
<p><a href="https://i.sstatic.net/7Vris.png" rel="noreferrer"><img src="https://i.sstatic.net/7Vris.png" alt="The “twig: custom statement javascript” language injection settings" /></a></p>
<p>Click <strong>OK</strong> and then <strong>Apply</strong> to save.</p>
<p>You can also add support for interpreting <code>{% css %}</code> tag contents as CSS by duplicating that language injection, setting its Language ID to <strong>CSS</strong>, and setting its <strong>Places Pattern</strong> to:</p>
<pre><code>+ twigCustomStatement(&quot;css&quot;)
</code></pre>
<img src="https://i.sstatic.net/10pes.png" width="469" alt="The settings for a new CSS language injection">

CC BY-SA 4.0
2021-04-21T14:14:27.260Z
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.
Matthias Redl-Mann
CC BY-SA 4.0
2021-04-22T01:15:43.983Z
@MatthiasRedl-Mann I’m not sure if that’s possible, sorry.
Brandon Kelly
CC BY-SA 4.0
2024-01-14T21:04:27.873Z
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.
Piotr Pogorzelski
CC BY-SA 4.0
2021-04-19T15:20:54.193Z
2021-04-19T15:31:53.680Z
2021-04-19T15:31:53.680Z
Brandon Kelly
<p>Does anyone know how to get PHPStorm interpret <code>{% js %}</code> as <code>&lt;script&gt;</code> for correct syntax highlighting in PHPStorm?</p>
<p>Background: I'am always doing this:</p>
<pre><code>{% js at endBody %}
    {% if false %}&lt;script&gt;{% endif %}
    document.querySelector('body').classList.add('overlay');
    {% if false %}&lt;/script&gt;{% endif %}
{% endjs %}
</code></pre>
<p>which I would like to avoid.</p>

CC BY-SA 4.0
2021-04-19T14:10:00.117Z
No solution yet. Here's the [topic](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000038510-Formatting-code-within-a-Twig-Language-Injection) > [ticket](https://youtrack.jetbrains.com/issue/WI-40602?_ga=2.61462703.287967644.1618763921-1916018252.1617364360) on Jetbrains site
Leo Leoncio
<templating><javascript><js>
Interpret TWIG's {% js %} as <script> in PHPStorm
# Interpret TWIG's {% js %} as <script> in PHPStorm

(Asked by: username_0 on 2021-04-19)

Does anyone know how to get PHPStorm interpret `{% js %}` as `{% endif %}
{% endjs %}`

which I would like to avoid.

**Tags:** templating, javascript, js

> **Comments:**
> **username_1**: No solution yet. Here's the [topic](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000038510-Formatting-code-within-a-Twig-Language-Injection) > [ticket](https://youtrack.jetbrains.com/issue/WI-40602?_ga=2.61462703.287967644.1618763921-1916018252.1617364360) on Jetbrains site  

---

## 1 answers

### Answer by username_2 on 2021-04-19. Score: 10 | Accepted answer

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 Preferences → Editor → Language 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")


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")

> **Comments:**
> **username_0**: 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.  
> **username_2**: @MatthiasRedl-Mann I’m not sure if that’s possible, sorry.  
> **username_3**: 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.  

---

