How to implement language interleaving, e.g., markup inside JavaScript/CSS inside a script/style tag inside markup?


My custom language plugin includes an HTML-based markup language with additional templating tags and an embedded expression syntax. I've had that all working for a very long time using a MultiplePsiFilesPerDocumentFileViewProvider and a combination of FileNSInfoProvider/TagNameProvider/ElementDescriptorProvider/AttributeDescriptorsProvider.

Now a user has pointed out that in commercial IDEs with full HTML/JS/CSS support, there's an issue using the templating tags insight of script/style tags, e.g.:

        <apex:repeat var="str" value="{!strs}">
            <apex:outputText value="{!str}"/>

The issue, of course, is that the base IDE is trying to interpret the templating markup inside the script tag as JavaScript. What I really want to happen is for it to treat it as my extended HTML dialect, but I'm not sure how to do that. I looked at using language injection but there doesn't seem to be a valid injection host.

Any thoughts on how to make this work? Thanks in advance!


Hi. The best way to solve the problem is to create a new inheritor of the HtmlLexer (and likely also HtmlHighlightingLexer) for your HTML-like language and override


method behaviour.

You can find similar code in Vue and Angular plugins here:



Thanks, Andrey. I'll look into that and see what I can figure out.


Please sign in to leave a comment.