Syntax highlighting of PHP inside JavaScript (and other languages)

clip_image001From time to time we have to mix different programming languages in one file. If there is only one or two occurrences of these small, embedded language islands, using Language Injections is the way to go. But what if we have a lot of them?

For example, a JavaScript or CSS file in which we are making use of a PHP variable or function: How do we get mixed syntax highlighting, code completion and inspections? There’s a nice trick to do this: configuring the Template Data Language.

This functionality is available in IntelliJ IDEA, PyCharm, WebStorm, PhpStorm, RubyMine and AppCode for various languages.

We can configure PhpStorm to recognize a file, folder and even an entire project as containing multiple languages. For example, we can use PHP syntax inside JavaScript and echo a specific variable to output. Our IDE will recognize both languages and provides syntax highlighting, code completion, inspections, refactorings and so on.

We can do similar things with CSS and embedded PHP. Here’s a .css.php file for which I’ve specified the Template Data Language as CSS. It features inspections for both the CSS part of the syntax as well as the embedded PHP.

In order to configure syntax highlighting of PHP inside JavaScript (and other languages combinations):

  1. Rename the file from *.js to *.js.php (for example) to have a separate file type for files of this kind.
  2. Associate new file type with PHP in Settings | File Types.
  3. Specify a secondary language for a specific file,  folder or the entire project in Settings | Template Data Languages. For our example, we can select JavaScript.

See the full tutorial: Syntax highlighting of PHP inside JavaScript (and other languages).

Working with mixed syntax in your project? Head over to the tutorials page and learn how to set things up for this to work. Let us hear your thoughts in the issue tracker, through the comments below or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

This entry was posted in Cool Feature and tagged , , , , , , . Bookmark the permalink.
  • zetcha

    Hmm. This is great for syntax highlighting, but not for normal working with js/css files.

    With this configuration is syntax highlighting in js/css file (js/css and php code) ok, but PhpStorm stopped code completing for js/css code. :-(

    Not applicable.

    • Maarten Balliauw

      Which settings did you apply?

      • zetcha

        First step – I associate *.js file type with PHP in Settings | File Types + remove *.js from JavaScript file type.

        Second step – I setup a secondary language (JavaScript) for folder with js files in Settings | Template Data Languages.

        Result – Stoped js code completing, php code completing is fine. Syntax highlighting js code is fine and php too.

  • raveren

    This code is horribly broken and doubtfully it would be highlighted that way:

    http://blog.jetbrains.com/phpstorm/files/2013/10/04.png

    • Maarten Balliauw

      Updated the image but PhpStorm is in fact able to parse it.

  • Devon

    PHP is missing from Template Data Languages in 7.1.3. I’d rather not have to rename my files from the original extension because I have autodeployment on my sandbox. A recommendation of mine would be to allow us to do this by right clicking on the file rather than having to go through the settings and finding the file.