Search code examples
typescriptphpstormconstantswebstorm

PhpStorm (WebStorm) - Constant with HTML code inside backtick in a typescript file becomes plain text after 4120 characters. Loses syntax highlighting

I am using PhpStorm (WebStorm) to build an angular 2 app using typescript. I have a .ts file that exports a constant that has the HTML (the view) of the component.

PhpStorm (WebStorm) has this cool feature that recognizes HTML Syntax, error highlighting and coding assistance within backticks (`). The issue that I am facing is that after 4120 characters, the HTML syntax recognition stops and the code becomes plain text.

I have searched around but haven't found anything on it. Is this a bug? Maybe there's a setting for it?

4120 characters with HTML syntax working: enter image description here

4121 characters with HTML syntax NOT working: enter image description here

PhpStorm Version:
PhpStorm 2016.1
Build #PS-145.258, built on March 16, 2016
JRE: 1.8.0_40-release-b132 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o

Solution

  • I didn't see anything in the issue tracker. I can reproduce it for the HTML language injection (occurs in PHP and JS as well). When I try a different language injection (e.g. SQL in php files), there did not appear to be a limit.

    You can create a new language injection rule by going to Setting > Editor > Language Injections. Click the green plus sign button. Provide at minimum the following. Refer to the links at the bottom if you want to tweak it further:

    Name: (choose a name)
    ID: HTML
    Places Patterns:

    + jsLiteralExpression().withText(string().matchesBrics("(\\<\\<\\<)?.*\\</?<anyname>.*>.*"))

    Two other quick fixes that are good to know about:

    • Languages can be defined in the comments. Add the following to the beginning of your file: /* language=HTML */

    • Languages can be injected temporarily. With the caret in the string, press Alt + Enter and select Inject language or reference. Then select HTML.

    References