Sublime Forum

Mixing default JS syntax with HTML tagged function


I’ve researched about this a lot and there’s lit element package which does a great job but it defines its own syntax. let me explain what I want

html`<div>${myobj.getText({simple: true})}</div>`

this should start the basic html syntax after html and a basic template literal expression syntax for javascript after ${. the expression syntax should be popped with a top level (in the expression) curly brace ending } since there can be a multiple curly braces. the same for the string itself - the last top level backtick should pop the html syntax.

but these should extend or use the default syntax definitions. I don’t want the highlighting change colors when I switch from default js syntax.

I think this should really be simple but I’m not familiar with this yaml synax definition stuff so can anyone help me on this?



You may want to look into JSCustom and see if that will work for you.

I’ve used it in the past for exactly this thing; my JS Custom.sublime-settings file is:

    "configurations": {
        "Default": {},
        "Lit": {
            "flow_types": true,
            "jsx": true,
            "custom_templates": {
                "tags": {
                    "css": "scope:source.css",
                    "html": "scope:text.html.basic"

This, in a nutshell would use a template function like html to mark off content that should be treated as HTML and css as a template function to mark off content that should be CSS.

It has been a while since I did anything with Lit so I can’t recall offhand how the template literal expressions highlight, so extra tweaking of the config may be required.