[JavaScript] HTML and CSS syntax highlighting in tagged template strings

[jrburke]

Is it possible to support HTML/CSS syntax highlighting inside a tagged template string? I am looking to do the equivalent of this atom editor change.

My first attempt at this did not work out so well. I just tried modifying the existing literal-quasi (but locally renamed it to literal-template-string everywhere in the file), just to see if I could get the HTML referencing correctly, before creating a new kind of match just for the "ending in html" tagged template function case:

  literal-template-string:
    - match: '([a-zA-Z$_][\w$_]*)?(`)'
      captures:
        1: entity.template-string.tag.name.js
        2: punctuation.definition.template-string.begin.js
      push:
        - meta_content_scope: source.html.embedded.js
        - include: 'scope:text.html.basic'
      with_prototype:
        - match: "`"
          captures:
            0: punctuation.definition.template-string.end.js
          pop: true
        - match: '\${'
          captures:
            0: punctuation.template-string.element.begin.js
          push:
            - meta_scope: entity.template-string.element.js
            - match: "}"
              captures:
                0: punctuation.template-string.element.end.js
              pop: true
            - include: expression

But I get an Apparent recursion within a with_prototype action: 25000 context sanity limit hit error. I am very new to these kinds of syntax files, so I expect I am making some very simple mistakes. I appreciate receiving any pointers on how to fix the issue.

My guess is that since JavaScript.sublime-syntax's expression has include: literal-template-string and literal-template-string is referencing source:text.html.basic, which inside of it references scope:source.js, maybe some pathway with all of that is causing the recursion.

Related context:

• This does not take into account the changes in [JavaScript] Renames Quasi literal to Template literal #165, I expect to redo some of it once that changeset lands.
• Previous discussion in Benvie/JavaScriptNext.tmLanguage#134, but I would want to scope the use of HTML to tagged template functions ending in (?i)html, to allow alternate highlighting for other content, like CSS for functions ending in (?i)css, as the Atom changeset does.
• GitHub's source display now does this kind of higlighting: example test.js.
• That test file is part of a tts-syntax-highlight repo to track this sort of enhancement in editors now that ES2015 template strings are used more.

[orizens]

There's also a suggested YML solution in this thread
https://forum.sublimetext.com/t/javascript-es6-template-literals-syntax-for-html/18242

[Rayraegah]

I made it work by extending the default JavaScript Syntax.

Edited to include suggestions from comments below.

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript Custom Element
file_extensions:
  - element.js
  - tag.js
  - jsx
  - js
scope: source.js.tag
contexts:
  main:
    - match: ""
      push: Packages/JavaScript/JavaScript.sublime-syntax
      with_prototype:
      - match: '([a-zA-Z$_][\w$_]*)?(`)'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true
          - match: '\$\{'
            captures:
              0: punctuation.definition.template-expression.begin.js
            push:
              - meta_scope: meta.template.expression.js
              - include: 'scope:source.js'
              #- meta_content_scope: source.js.embedded.expression
              - match: '\}'
                scope: punctuation.definition.template-expression.end.js
                pop: true

[3mcd]

@Rayraegah Your solution doesn't work with tagged template literals.

Replace - match: '`\n' with - match: '([a-zA-Z$_][\w$_]*)?(`)' and they will work.

[qodesmith]

@Rayraegah where did you save that file and with what name?

[Rayraegah]

@qodesmith Just create a new syntax file and dump that code in there. Also, use @ericmcdaniel 's suggestion.

Then, in your editor settings, set open all files with the new syntax instead of the default.

[Thom1729]

The JS Custom package lets you add user-defined template tags. In my opinion, this is a better approach than adding them to the core syntax.

[Slakinov]

@Thom1729 would you mind explaining in a bit more detail how the JS Custom package should be set up to show html syntax within `` backticks in JS files?

[Thom1729]

JS Custom version 1.0.13 is out, updating the package for Sublime 3.1.

More importantly, I've just fixed a really egregious bug in the documentation. Try this:

{
    "configurations": {
        "Vue Backticks": {
            "custom_template_tags": {
                "html": "scope:text.html.basic"
            },
        },
    },
}

[Slakinov]

@Thom1729 Thanks for the info! Just updated the package and tried that config.
I'm now getting the recursion warning someone mentioned above.
Any idea how to fix?
Do I need to make an alternative html syntax definition that doesn't attempt to parse js again within itself?
Sorry if these are dumb questions.

[Thom1729]

Are you running Sublime 3.1? The new version of the core HTML syntax uses embed/escape instead of push/with_prototype, and that should avoid the infinite recursion.

[Slakinov]

I'm running build 3170, which is 3.1 according to the sublime site, but 3.0 in my about window.

Had to remove some user package files after removing the JS Custom package to stop the recursion error when viewing any .html file.

I've now reinstalled JS Custom, and added your config above, no recursion error now, but no backtick highlighting either...

Any more ideas?

[keith-hall]

my guess is you need to write html before the opening backtick.