WebStorm syntax highlighting for Swig template engine

Question

Given:

• The Swig template engine: http://paularmstrong.github.io/swig/
• Webstorm has a plugin for it: Textmate bundles support
• A Textmate bundle for Swig is available: https://github.com/paularmstrong/Swig.tmbundle

I expect I should be able to get Swig highlighting fixed, but I'm only getting half way.

Below is the resulted highlighting I get. The Swig code is highlighted as expected, but HTML is not highlighted anymore.

I've tried installing and enabling the HTML textmate bundle as well, but when both the HTML and the Swig bundle are activated, the code is highlighted as only HTML. If I disable the HTML bundle but have the Swig bundle still active, I only get Swig highlighting.

My Question: How do I get Swig code and HTML code highlighted in the same file in WebStorm on Windows?

Result:

This is my Textmate Bundles configuration in WebStorm 9:

Again, simply selecting the HTML bundle to enable it doesn't work.

Answer 1

Swig has nearly identical syntax to Twig, so we can assume they can be used interchangeably speaking of syntax highlighting and code completion.

The thing is that PHPStorm it has a Twig support throught a plugin (which is awesome BTW), but sadly it is not available in the others IDEs thought the Plugins menu.

This issue can be solved by:

• manually downloading the plugin from the official repo at https://plugins.jetbrains.com/plugin/7303?pr=

• then installing it manually thought the Plugin interface,

• then or use the .twig extension on files or adding a new mapping in the File Types system menu for the type Twig, with wildcard *.html or *.swig, how you prefer.

I'm using the *.html workaround and work like a charm, both Swig & HTML syntax highlighting + code completion.

Hope this helps you like it did to me :)