How to PHPDoc inline JavaScript string parameter to allow syntax highlight in PhpStorm

Question

WordPress has a PHP function which allows to inject inline JavaScript to the page: https://developer.wordpress.org/reference/functions/wp_add_inline_script/

Is there a way to mark the $data parameter to tell the IDE that it is a string which contains JavaScript code and then syntax highlight it?

wp_add_inline_script( 'xyz', 'new xyz();' );


/**
 * Adds extra code to a registered script.
 *
 * @param string $handle   Name of the script to add the inline script to.
 * @param string $data     String containing the javascript to be added.
 * @param string $position Optional. Whether to add the inline script before the handle
 *                         or after. Default 'after'.
 * @return bool True on success, false on failure.
 */
function wp_add_inline_script( $handle, $data, $position = 'after' ) {
    _wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

    if ( false !== stripos( $data, '</script>' ) ) {
        _doing_it_wrong( __FUNCTION__, sprintf(
            /* translators: 1: <script>, 2: wp_add_inline_script() */
            __( 'Do not pass %1$s tags to %2$s.' ),
            '<code>&lt;script&gt;</code>',
            '<code>wp_add_inline_script()</code>'
        ), '4.5.0' );
        $data = trim( preg_replace( '#<script[^>]*>(.*)</script>#is', '$1', $data ) );
    }

    return wp_scripts()->add_inline_script( $handle, $data, $position );
}

It highlighted it for me: i.gyazo.com/9898fa40e3d88a3ff7f54886141e10fd.png. You can try to add /** @lang javascript */ annotation to force syntax highlighting there, e.g. $data = trim( /**@lang javascript */preg_replace( '#<script[^>]*>(.*)</script>#is', '$1', $data ) ); — Dmitrii
– Dmitrii, Commented Apr 10, 2018 at 9:52
@Ástþór It does nothing for me, see: i.imgur.com/qTOjEeK.png — Roland Soós
– Roland Soós, Commented Apr 10, 2018 at 12:16

Jeto · Accepted Answer · 2018-04-12 08:49:20Z

1

Refer to the Using Language Injections documentation page.

Basically, there are three ways to do this:

Put your cursor anyone within your string containing JS, hit Alt+Enter (or click the lightbulb), select Inject language or reference then pick JS.

Define a variable and add // language=JavaScript on top of it, then pass it to the method:

// language=JavaScript
$data = 'document.getElementbyId("selector")';

wp_add_inline_script('handle', $data, 'position');

Probably the most appropriate solution in your case, use /* language=JavaScript */ before passing your argument:

wp_add_inline_script('handle', /* language=JavaScript */ 'document.getElementbyId("selector")', 'position');

edited Apr 12, 2018 at 8:49

answered Apr 12, 2018 at 8:39

Jeto

15k2 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roland Soós Over a year ago

Thanks, I like the second option. Also is there a way to properly syntax highlight the JavaScript if variables come from PHP? For example: wp_add_inline_script( 'xyz', 'new xyz('. $myPHPVar .');');

Jeto Over a year ago

@RolandSoós See my edited answer, third option should be even better.

Roland Soós Over a year ago

yeah, that seems fine, but it does not work if variable comes from PHP, see i.imgur.com/J0re2lp.png

Jeto Over a year ago

@RolandSoós Try wp_add_inline_script('xyz', /* language=JavaScript */ "new xyz(\"$myPHPVar\");"); (using string interpolation instead of contatenation).

Collectives™ on Stack Overflow

How to PHPDoc inline JavaScript string parameter to allow syntax highlight in PhpStorm

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related