PhpStorm
 
Get PhpStorm

Tutorial: Highlighting PHP syntax inside JavaScript

Last modified: 11 February 2024

In this tutorial, we'll explore using Template Data Language for working with mixed syntax in PhpStorm. From time to time we are mixing different programming languages in one file. If there is only one or two occurrences of such injections, 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 a 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.

Consider the following JavaScript file. Inside the file, we are making use of a PHP variable which we want to show in an alert when the current document has loaded. We can also spot a syntax error: I missed the $ to access the variable. How do we make PhpStorm recognize both the JavaScript code and PHP code?

Mixed syntax highlighting in a js file

To have PhpStorm recognize different languages in one file, perform the following steps.

  1. Rename the file, so that PhpStorm treats it as PHP, while its extension differs from php.

  2. Associate new file type with PHP (or another language).

  3. Set the Template Data Language via the settings.