Search code examples
phpstormjetbrains-idetwig.js

JetBrains IDE language injection rule for script type=text/x-twig

I'm writing html files that include several templates in Twig template language. These are later used with twig-js document.getElementById('my-template').innerHTML.

I want them to be highlighted as Twig templates and my current solution is to inject the language using a comment:

<!-- language=twig -->
<script type="text/html" id="my-template">
    <div>
    {% if value %}
        <b>{{value}}</b>
    {% else %}
        {{default}}
    {% endif %}
    </div>
</script>

I would rather just have <script type="text/x-twig" id="..."> and the IDE is doing the rest.

I don't quite understand how the rules work.

  1. why is there no language twig although the twig plugin is enabled?
  2. I setup an XML tag injection for the tag script with XPath condition: attribute::type="text/x-twig"

No matter what I try if the type is not text/html it keeps showing JavaScript errors. My fault - it was an issue with another rule for every script tag.

The rule works but I can't select it to be a Twig template. But I can define it using the manual injection method with a comment.

Is there maybe a way to tell PhpStorm that the mimetype text/x-twig is a Twig template?

Solution

  • Sadly you cannot. The way it's currently implemented is that "Twig is not an injectable language but a template-based one."

    My best suggestion (excluding whatever you are doing already) is to check and watch these tickets (star/vote/comment) to get notified with any progress:

    P.S. What other Twig-like templating do you know?

    My idea is to try a plugin for that templating language and see if that can be used for such an injection.

    E.g. Liquid uses similar syntax, but it is also "file template-based only"... Maybe check plugin for Mustache (who knows, might do at least something).