Answers.Body: <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">
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-21T14:14:27.260Z
Answers.Text: 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.
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T01:15:43.983Z
Answers.Text: @MatthiasRedl-Mann I’m not sure if that’s possible, sorry.
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-01-14T21:04:27.873Z
Answers.Text: 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.
Answers.UserDisplayName: Piotr Pogorzelski
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-19T15:20:54.193Z
Answers.LastActivityDate: 2021-04-19T15:31:53.680Z
Answers.LastEditDate: 2021-04-19T15:31:53.680Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-04-19T14:10:00.117Z
Comments.Text: 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
Comments.UserDisplayName: Leo Leoncio
Tags: <templating><javascript><js>
Title: Interpret TWIG's {% js %} as <script> in PHPStorm
ThreadText: # 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 `<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.
  
  **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](https://www.jetbrains.com/help/phpstorm/language-injections-settings.html) feature.
  
  In fact, as of PhpStorm 2017.3, it has included [support for `{% script %}` tag](https://blog.jetbrains.com/phpstorm/2017/12/twig-handling-improvements/)s 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")
  
  ```
  
  [![The “twig: custom statement javascript” language injection settings](https://i.sstatic.net/7Vris.png)](https://i.sstatic.net/7Vris.png)
  
  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](https://i.sstatic.net/10pes.png)
  
  > **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**: @username_0 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.  
  
  ---
  
  